I have taken this onemonthrails.com course, and I have followed the tutorial to the tee. The course instructor has us following his examples and we are creating a pinterest like sample application. There is one section where he instructs us to add a navbar that collapses when the view of the page becomes narrow - the "home" and "about us" button should disappear into the nav bar button when the view gets to its most narrow point. This does not happen for me. I am assuming that there has been updates made since the recording of the tutorial, and it does not like my code. I will paste some of the pages of my code. I really hope someone has an answer to this, because I am almost at the point where I start breaking things. lol
Header Page:
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data- toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">The Coffee Table</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class= "collaspe navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "About us", about_path %></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
JS.application:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (http://ift.tt/1Hr2XzQ) for details
// about supported directives.
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
Layout Application html File:
<!DOCTYPE html>
<html>
<head>
<title>First</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data- turbolinks-track' => true %>
<%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'layouts/header' %>
<div class= "container">
<%= yield %>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire