user2012677 user2012677 - 1 month ago 13
CSS Question

Bootstrap - Navbar Collapse menu not displaying

My navbar does not collapse correctly. When the window is made smaller, the navbar disappears completely and the replacement accordion menu does not get displayed. Ideas?

<section id='mainnavbar'>
<div class="navbar">

<!-- Header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainnavbar-link">
<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=<%= root_path %> >
<!-- <%= t('company_name') %> -->
<%= render_logo %>
</a>
</div>
<!-- Navbar Links -->
<div id='mainnavbar-link' class="pull-right collapse navbar-collapse">
<ul class="nav navbar-nav">
<% Page.roots.menu.each do |menu_item| %>
<%= render partial: 'shared/nav/nav_pages_item', locals: {:menu_item => menu_item} %>
<%end%>
</ul>
</li>
</ul>
</div>
</div>
</section>

Answer

I'm assuming you mean the hamburger menu button. It does get displayed but you can't see it because it's the same colour as the background.

You need to change the first div to include an extra class if you want to use the default bootstrap navbar:

<div class="navbar navbar-default">

jsfiddle: https://jsfiddle.net/2Lxkpzwc/3/