How to control a nested nav bar when it toggles

Mobile
1

I build this site with twitter bootstrap 3 and have a question as to how I can make just the items within a nested menu appear when the site is viewed on a mobile device.

I’m currently using the hidden-sm hidden-xs classes to hide all but one menu item. That menu item consists of a nested list of pages


<li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Insurance <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="auto-insurance.html">Auto</a></li>
            <li><a href="boat-insurance.html">Boat</a></li>
            <li><a href="commercial-insurance.html">Commercial</a></li>
            <li><a href="commercial-property-insurance.html">Commercial Property</a></li>
            <li><a href="condo-insurance.html">Condo</a></li>
            <li><a href="homeowners-insurance.html">Homeowners</a></li>
            <li><a href="life-insurance.html">Life</a></li>
            <li><a href="motorcycle-insurance.html">Motorcycle</a></li>
            <li><a href="renters-insurance.html">Renters</a></li>
            <li><a href="workers-compensation.html">Workers Compensation</a></li>
          </ul>
        </li>

The problem is that in order to select one of these items you have to first tap the toggle button to bring up the menu, then select the parent menu item (Insurance), and then select a nested menu item. I would like to just have the nested items appear when you tap the toggle button eliminating the need to make two choices to get where they want.

Here is my header:


<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle hidden-sm hidden-xs" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="index.html" class="navbar-brand orange1"><img src="assets/img/best-selling-insurance-logo-2.png" ></a>
    </div>

    <nav class="collapse navbar-collapse bs-navbar-collapse pull-right " role="navigation">
      <ul class="nav navbar-nav">

        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Insurance <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li><a href="auto-insurance.html">Auto</a></li>
            <li><a href="boat-insurance.html">Boat</a></li>
            <li><a href="commercial-insurance.html">Commercial</a></li>
            <li><a href="commercial-property-insurance.html">Commercial Property</a></li>
            <li><a href="condo-insurance.html">Condo</a></li>
            <li><a href="homeowners-insurance.html">Homeowners</a></li>
            <li><a href="life-insurance.html">Life</a></li>
            <li><a href="motorcycle-insurance.html">Motorcycle</a></li>
            <li><a href="renters-insurance.html">Renters</a></li>
            <li><a href="workers-compensation.html">Workers Compensation</a></li>
          </ul>
        </li>

        <li class="hidden-sm hidden-xs">
          <a href="form-ms.html">Compare Rates</a>
        </li>

        <li class="call-now hidden-sm hidden-xs ">
          <a class="btn btn-orange" href="">
            Call Now</a>
        </li>

      </ul>
    </nav>
  </div>
</header>

here is a link to the site
http://aaronhaas.com/bsi20/

2

Hi,

Something like this should get you started.


@media screen and (max-width:768px){
.navbar-collapse.collapse li.dropdown > a{display:none}
.navbar-collapse.collapse{
max-height:none;
float:none!important;
text-align:center;
}
.navbar-collapse.collapse .dropdown-menu{
display:block;
position:static;
width:auto;
float:none;
}
}
3

Thanks Paul, that got it working, but there is a small problem. When you click the button, it has some sort of animation like effect where it still shows the parent menu item, and then a second later shows the list. Is there a way to make it so it just shows the nested menu?

Here is the live site
http://aaronhaas.com/bsi22/

Thanks again

4

Hi,

You could try this:


@media screen and (max-width:768px){
.navbar-collapse li.dropdown > a{display:none;}
.navbar-collapse.collapse li.dropdown > ul{margin-top:-20px}
}