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
    }