user2012677 user2012677 - 1 year ago 111
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>
<a class="navbar-brand" href=<%= root_path %> >
<!-- <%= t('company_name') %> -->
<%= render_logo %>
<!-- Navbar Links -->
<div id='mainnavbar-link' class="pull-right collapse navbar-collapse">
<ul class="nav navbar-nav">
<% do |menu_item| %>
<%= render partial: 'shared/nav/nav_pages_item', locals: {:menu_item => menu_item} %>

Answer Source

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">


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download