I'm trying to make my dropdown menu open by default when my collapsed navbar is opened. Here is a fiddle to show my code so far.

Currently, if you click on the navbar when it's in a collapsed state, two links and a dropdown menu are revealed. You have to click again to open the dropdown menu.

My aim is to make the dropdown menu open by default and hide the a.dropdown-toggle element when the collapsed navbar is opened. A visual of how I'd like it to look when the collapsed navbar is opened:

• Link


• Link


• Dropdown


• Action


• Another action


• Something else here


• Separated link


• One more separated link

My first thought was to use display: none on a.dropdown-toggle but that just hides the whole dropdown menu. Hoping someone can suggest something. I'm open to both jQuery and CSS solutions.

My markup:

<nav class=navbar navbar-default role=navigation>

  <div class=container-fluid>

    <!-- Brand and toggle get grouped for better mobile display -->

    <div class=navbar-header>

      <button type=button class=navbar-toggle data-toggle=collapse data-target=#bs-example-navbar-collapse-1>

        <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=#>Brand</a>

    </div>



    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class=collapse navbar-collapse id=bs-example-navbar-collapse-1>

      <ul class=nav navbar-nav>

        <li class=active><a href=#>Link</a></li>

        <li><a href=#>Link</a></li>

        <li class=dropdown>

          <a href=# class=dropdown-toggle data-toggle=dropdown>Dropdown <span class=caret></span></a>

          <ul class=dropdown-menu role=menu>

            <li><a href=#>Action</a></li>

            <li><a href=#>Another action</a></li>

            <li><a href=#>Something else here</a></li>

            <li class=divider></li>

            <li><a href=#>Separated link</a></li>

            <li class=divider></li>

            <li><a href=#>One more separated link</a></li>

          </ul>

        </li>

      </ul>

    </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->

</nav>