Bootstrap dropdown menu disappears on mobile

Question

I made a navbar that only has a dropdown menu. When I view the site on mobile the dropdown menu disappears and the collapse menu doesn't show up either. Not sure how to fix it.

This is what the menu looks like,

Closed Open

On Mobile

This is the html

<div class="navbar navbar-light" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
        <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" ui-sref="cards">NotePail</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span></a>
          <ul class="dropdown-menu">
            <li><a ui-sref="account">My Account</a></li>
            <li><a ui-sref="cards">My Sets</a></li>
            <li class="divider"></li>
            <li><a href="server/logout">Logout</a></li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>

How can I get the menu to appear on mobile?

Answer 1

Try this:

1. simplify your HTML-code as Lucas Watson advised
2. make .navbar-header and .navbar-right floating
3. add CSS for mobile dropdown from this answer

Please check the result. Is it what you want to achieve?

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

@media (max-width: 767px) {
  .navbar-header {
    float: left;
  }
  .navbar-right {
    float: right !important;
  }
  
  .navbar-nav .open .dropdown-menu {
    position: absolute;
    right: 0;
    left: auto;
    padding: 5px 0;
    margin: 2px 0 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
  }
  .navbar-nav .open .dropdown-menu > li > a {
    color: #000;
    padding: 3px 20px;
    line-height: 1.42857143;
  }
  .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #333;
    background-color: #e7e7e7 !important;
    background-image: none;
  }  
  .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #555;
    background-color: #e7e7e7 !important;
  }
  .navbar-nav .open .dropdown-menu > .disabled > a,
  .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  .navbar-nav .open .dropdown-menu > .disabled > a:focus {
    color: #ccc;
    background-color: transparent;
  }
}

<div class="navbar navbar-light" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" ui-sref="cards">NotePail</a>
    </div>

    <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span></a>
        <ul class="dropdown-menu">
          <li><a ui-sref="account">My Account</a></li>
          <li><a ui-sref="cards">My Sets</a></li>
          <li class="divider"></li>
          <li><a href="server/logout">Logout</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 2

Add navbar-default or navbar-inverse to your .navbar div to show the toggle styles then you'll see the mobile toggle button to open the menu. Or write some CSS to style the icon-bars. See Navbar

With Default Style Example:

.navbar.navbar-light {
  background: #1086AD;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-static-top navbar-light" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
        <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" ui-sref="cards">NotePail</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-th"></span></a>
          <ul class="dropdown-menu">
            <li><a ui-sref="account">My Account</a>
            </li>
            <li><a ui-sref="cards">My Sets</a>
            </li>
            <li class="divider"></li>
            <li><a href="server/logout">Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Example with your own CSS:

.navbar.navbar-light {
  background: red;
}
.navbar.navbar-light .icon-bar {
  background: white;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-static-top navbar-light" role="navigation">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-slide-dropdown">
        <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" ui-sref="cards">NotePail</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-slide-dropdown">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-th"></span></a>
          <ul class="dropdown-menu">
            <li><a ui-sref="account">My Account</a>
            </li>
            <li><a ui-sref="cards">My Sets</a>
            </li>
            <li class="divider"></li>
            <li><a href="server/logout">Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 3

What's happening is you're putting your custom dropdown in the "bs-slide-dropdown" div, which Bootstrap traditionally hides and creates a dropdown of on mobile.

What you can do is either A) Bootstrap 3 - disable navbar collapse

or B) Simpplify your code to something like the following:

<div class="navbar navbar-light" role="navigation">
  <div class="container">

  <div class="navbar-header">
    <a class="navbar-brand" ui-sref="cards">NotePail</a>
  </div>

  <ul class="nav navbar-nav navbar-right">
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span></a>
      <ul class="dropdown-menu">
        <li><a ui-sref="account">My Account</a></li>
        <li><a ui-sref="cards">My Sets</a></li>
        <li class="divider"></li>
        <li><a href="server/logout">Logout</a></li>
      </ul>
    </li>
  </ul>

(You may have to mess around with this to get positioning correct)