Menu
I want to have a navbar that collapses when I resize the screen, so I thought to use Bootstrap.
In the application.html.erb:
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Some Store</a>
<div class="nav-collapse">
<ul class="nav">
<li><%= link_to "Browse Products" %></li>
<li><%= link_to "Price List" %></li>
<li><%= link_to "Contact Us" %></li>
<li><%= link_to "Cart" %></li>
</ul>
</div>
</div>
</div>
</div>
In the Gemfile I have gem 'bootstrap-sass'
In the application.css.scss I wrote @import 'bootstrap;'
In the application.js I have //= require bootstrap
I don't understand why It doesn't work, I just copied from the bootstrap site
458
Your imports are correct, but your current markup is not. It doesn't match the markup and classes that I see in some of the examples. I first attempted to build from your markup while using the sticky footer with fixed navbar example in the bootstrap docs as a guide to get the markup to display properly. Here's how I adjusted your markup:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="#">Some Store</a>
</div> <!-- end div class="navbar-header" -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><%= link_to "Browse Products" %></li>
<li><%= link_to "Price List" %></li>
<li><%= link_to "Contact Us" %></li>
<li><%= link_to "Cart" %></li>
</ul>
</div> <!-- end div class="collapse navbar-collapse" -->
</div> <!-- end div class="container" -->
</div> <!-- end div class="navbar navbar-default navbar-fixed-top" -->
If you look closely, I swapped the locations of the divs with classes container and navbar-inner and changed the class to <div class="navbar-header"> that surrounds the collapse button. Then I had to change div surrounding the menu items to have class navbar-collapse instead of the nav-collapse that you had, otherwise the menu items disappear. In order for the button to work, I changed it from an <a> tag to a <button> tag as well as the data-target="navbar-collapse" attribute to correctly target the collapsible menu items. Once these changes were made, I had a functioning drop-down menu for window sizes < 768px.
And don't forget to add a style to your <body> tag for padding-top:51px; to guarantee your site content appears underneath the fixed navigation bar.
Hope that helps!
Chris
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
