How to keep navigation bar collapsed on all screen sizes?

Question

I tried these two different solutions suggested here on SO:

• How to keep Bootstrap 3 navbar as collapsed for all screen sizes
• Change bootstrap navbar collapse breakpoint without using LESS

I've also tried many other different solutions suggesting more or less the same. None worked for me.

How can I keep Bootstrap 3 navigation bar collapsed on all screen sizes, both big and small?

This is the HTML:

<nav class="navbar navbar-default navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="index.html">
             <img class="img-responsive imglogoheader" src="images/logo1.png">
        </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class=""><a href="index.html">Home</a></li>
        <li><a href="profile.html">Profile</a></li>
         <li><a href="settings.html">Settings</a></li>
      <ul style="display:none !important;" class="nav navbar-nav navbar-right"></ul>
    </div>
  </div>
</nav> 

Answer 1

To make the navbar menu toggle-able on all responsive intervals in Bootstrap 3, you need this snippet:

@media (min-width: 768px) {
  .navbar {
    .navbar-header,
    .navbar-nav>li {
      float: none;
    }
    .navbar-nav {
      float: none;
      margin: 7.5px -15px;
    }
    .navbar-toggle {
      display: block;
      margin-right: 0;
    }
    .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-collapse.collapse {
      display: none;
    }
    .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .navbar-text {
      float: none;
      margin: 15px 0;
    }
    .navbar-collapse.collapse.in {
      display: block;
    }
    .collapsing {
      overflow: hidden;
    }
  }
}

Please note it's SCSS. If you want it as CSS, you could copy/paste it from the demo at the end of the answer.

The solution is largely adapted from this answer but I thought it's worth posting it as a clean one rather then telling you to play with breakpoints and clean it up. Most importantly, it doesn't use !important .

Feel free to upvote the original answer. It is an exceptional solution to a difficult problem, especially considering the complexity of Bootstrap 3's navbar collapse logic mechanics (it's done by the collapse plugin, in JavaScript - which makes it difficult to debug and/or reverse engineer).

See it working:

 @media (min-width: 768px) {.navbar.navbar-header, .navbar.navbar-nav>li { float: none; }.navbar.navbar-nav { float: none; margin: 7.5px -15px; }.navbar.navbar-toggle { display: block; margin-right: 0; }.navbar.navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }.navbar.navbar-collapse.collapse { display: none; }.navbar.navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; }.navbar.navbar-text { float: none; margin: 15px 0; }.navbar.navbar-collapse.collapse.in { display: block; }.navbar.collapsing { overflow: hidden; } }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <nav class="navbar navbar-default navbar-custom"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"> Logo </a> </div> <div class="collapse.navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li class=""><a href="index.html">Home</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="settings.html">Settings</a></li> </ul> </div> </div> </nav>

Answer 2

The answer suggested by tao worked at 60% but not all the way for me. Here I share what finally did it for me. In my custom.css I override bootstrap with custom rules

custom.css

@media (min-width: 768px) {
  .navbar .navbar-header,
  .navbar .navbar-nav>li {
    float: none;
  }
  .navbar .navbar-nav {
    float: none;
    margin: 7.5px -15px;
  }
  .navbar .navbar-toggle {
    display: block;
    margin-right: 0;
  }
  .navbar .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar .navbar-collapse.collapse {
    display: none;
  }
  .navbar .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .navbar .navbar-text {
    float: none;
    margin: 15px 0;
  }
  .navbar .navbar-collapse.collapse.in {
    display: block;
  }
  .navbar .collapsing {
    overflow: hidden;
  }
}

I had to comment out this line in bootstrap.min.cs to make it all work:

  .navbar-collapse.collapse {
    /* display:block!important;*/
     height:auto!important;
     padding-bottom:0;
     overflow:visible!important
    }