Gary Johnson Gary Johnson - 4 months ago 66
HTML Question

Bootstrap dropdown menu disappears on mobile

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
enter image description here
Openenter image description here

On Mobile
enter image description here

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

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>