Bootstrap-导航栏折叠菜单不显示

Question

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 1

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/

Answer 2

Your code seems good. I am currently working on a website that has navbar just like yours, and it seems to me that it's exactly like mine. Just in case, do you have jquery script on your page?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 3

make sure you include every thing needed. and it also mite be disappearing be hind something so just use z-index:1000 or position:absolute to fix this if you go into inspect element it and hover over the section or the div it should show you where on the screen it is

Answer 4

Add a custom class

 <div class="navbar navbar-custom">

which makes the hamburger menu visible

CSS

$bgDefault      : none;
$bgHighlight    : black;
$colDefault     : grey;
$colHighlight   : blue;
$dropDown       : false;



.navbar-custom {
  background-color: $bgDefault;
  border-color: $bgHighlight;
  .navbar-brand {
    color: $colDefault;
    &:hover, &:focus {
      color: $colHighlight; }}
  .navbar-text {
    color: $colDefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colDefault;
        &:hover,  &:focus {
          color: $colHighlight; }}
      @if $dropDown {
        > .dropdown-menu {
          background-color: $bgDefault;
          > li {
            > a {
              color: $colDefault;
              &:hover,  &:focus {
                color: $colHighlight;
                background-color: $bgHighlight; }}
            > .divider {
              background-color: $bgHighlight;}}}}}
    @if $dropDown {
      .open .dropdown-menu > .active {
        > a, > a:hover, > a:focus {
          color: $colHighlight;
          background-color: $bgHighlight; }}}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover, &:focus {
      background-color: $bgHighlight; }
    .icon-bar {
      background-color: $colDefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault; }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight; }}}
@media (max-width: 767px) {
  .navbar-custom .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
}