How to make a Bootstrap 3 dropdown menu open by default when it is inside a collapsed navbar


Tags: javascript,jquery,html,css,twitter-bootstrap-3

Problem :

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>


Solution :

You can add css style for responsive mobile display. paste it into your css file:

@media only screen and (max-width:480px){
    .dropdown-menu{
        display: block;
        position: static;
        background-color:transparent;
        border:0 none;
        box-shadow:none;
        margin-top:0;
        position:static;
        width:100%;
    }
    .navbar-nav .dropdown-menu > li > a, 
    .navbar-nav .dropdown-menu .dropdown-header {
        padding:5px 15px 5px 25px;
    }
    .navbar-nav .dropdown-menu > li > a{
        line-height:20px;
    }
    .navbar-default .navbar-nav .dropdown-menu > li > a{    
        color:#777;
    }
}

you can see it in its entirety here : Demo jsfiddle

hope that helps.


    CSS Howto..

    how to make a DIV responsive css html

    How to keep css id to the 'li' in css

    How can I split this image into pieces so when I write a long text, it doesn't go outside of the div?

    How does reddit create the top header without any margins?

    How to get the scroll bar with CSS overflow on iOS

    Dropdown Menu doesn't show all links and can't change css social media icons color

    How to convert UPPERCASE text to Title Case using CSS

    How to set
  • Backgound color?
  • How to make background-image size height always equal what the image height needs to be for full width image?

    How to Change Elements Before & After Navbar Collapse?

    How to scroll left column when cursor is above right column?

    How can I move a div with direction in JavaScript?

    How to add non-literal into a variable like jQuery?

    How to do two border upon one div tag by css or by css3? [duplicate]

    how to make yo angular load bootstrap theme css

    How to make .less files to have .css syntax highlight in Vim?

    How to get the element position after css-translation

    How to apply css transform on iOS without using -webkit-transform?

    How to achieve horizontally centered layout with partially liquid column?

    How can I show a DIV when hovering on a DIV using pure CSS?

    Why do the Google Fonts fail to show up on my website?

    How to create a medal in css [closed]

    How to make a
  • link visited with css
  • How to change divs placing from horizontal to vertical using css?

    How to make margin collapsing work with input type=button/submit?

    How to switch visibility of an HTML div in css for overlaying

    How to stop main scrollbar working when popup modal is activated, which needs also a scrollbar

    How to make divs float on both ends of another div?

    CodeIgniter how to add link to static file

    How do I disable Emmet's CSS Abbreviations in Sublime Text 2