How to Keep Bootstrap 3 Navbar as Collapsed for All Screen Sizes

How to keep navigation bar collapsed on all screen sizes?

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
    }

How to keep Bootstrap 3 navbar as collapsed for all screen sizes

You could use CSS to override the Bootstrap 3 defaults. For example, this would set the navbar to collapse on screen widths less than 2000 pixels (accommodating most screens)..

@media (max-width: 2000px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}

Demo: http://www.bootply.com/122572

---

Update for Bootstrap 4 (beta)

In Bootstrap 4 the navbar is always collapsed into the mobile/hamburger version by default: Demo. The navbar-expand-* class are used to change the breakpoint.

Bootstrap 3 - show collapsed navigation for all screen sizes

You can use override the default Bootstrap CSS like this...

    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

Demo: http://www.bootply.com/114896

This will ensure that the collapsed navbar is always used by overriding the Bootstrap @media queries.

Update: For Bootstrap 4, you just need to remove the navbar-toggleable class:
http://www.codeply.com/go/LN6szcJO53

Keep navigation items on all screen sizes

Here's an example of how you can keep your icons inside the navbars container (so all elements inside the navbar remain consistent) and then position the icons to remain exposed on viewports under 768px.

@media (max-width: 767px) {  .navbar .navbar-right.navbar-top {    position: absolute;    margin-top: 4px;    right: 80px;  }  .navbar .navbar-right.navbar-top > li {    display: inline-block;  }  .navbar .navbar-right.navbar-top > li > a {    padding-right: 10px;    padding-left: 10px;  }}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><nav class="navbar navbar-inverse navbar-fixed-top bo-header">  <div class="container">    <ul class="nav navbar-nav navbar-right navbar-top">      <li><a href="#"><i class="fa fa-envelope"></i></a>      </li>      <li><a href="#"><i class="fa fa-users"></i></a>      </li>      <li><a href="#"><i class="fa fa-wrench"></i></a>      </li>    </ul>    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">        <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="#">MY BRAND</a>    </div>    <!-- non-collapsing items -->    <div class="collapse navbar-collapse" id="navbar">      <ul class="nav navbar-nav navbar-left">        <li><a href="#">Nav Entry 1</a>        </li>        <li><a href="#">Nav Entry 2</a>        </li>        <li><a href="#">Nav Entry 3</a>        </li>        <li><a href="#">Nav Entry 4</a>        </li>      </ul>    </div>  </div></nav>

Collapse navbar on all size except large

Just use media query with overriding the navbar css class as follows to keep them in collapsed mode till max size 1200px. Add the following css rules within a css file and make sure to add this custom css file right after the bootstrap css file link in the head tag.

/*To keep the navbar collapsed on less or equal to 1200px screens size*/
   @media (max-width: 1200px) {
     .navbar-header {
          float: none;
      }

     .navbar-toggle {
          display: block;
      }

     .navbar-collapse {
          border-top: 1px solid transparent;
          box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
      }

     .navbar-collapse.collapse {
          display: none!important;
      }

     .navbar-collapse.collapse.in {
          display: block !important; 
      }

     .navbar-nav {
          float: none!important;
          margin: 7.5px -15px;
      }

     .navbar-nav > li {
          float: none;
      }

     .navbar-nav > li > a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
  }

Sample code: http://codepen.io/Nasir_T/pen/jVaQyX

Change bootstrap navbar collapse breakpoint without using LESS

You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:

@media (min-width: 768px) and (max-width: 1000px) {
   .collapse {
       display: none !important;
   }
}

This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.

Collapsed Navbar only showing on small screen size bootstrap

You are using bootstrap 3 markup and linking to bootstrap 4 css either link to bootstrap 3's css and javascript like so:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Or change your navbar markup to bootstrap 4's markup like so:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">
    <img alt="logo" src="logo.png" width="250px;">
  </a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Build</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

Bootstrap 3 Navbar Collapse

I had the same problem today.

Bootstrap 4

It's a native functionality: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

You have to use .navbar-expand{-sm|-md|-lg|-xl} classes:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

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

Just change 991px by 1199px for md sizes.

Demo

Bootstrap 3 Navbar with many Items not collapsing but making two lines instead

Easy to fix.

It's because you have two navbar-brand a links.

    <a class="navbar-brand" href="#"><img src="" alt="Text">
    </a></div><a class="navbar-brand" href="#">
    </a>

Get rid of the second one and the end div, it should be just this:

    <a class="navbar-brand" href="#"><img src="" alt="Text">
    </a>

Bootstrap 3 + Less - disable collapse-navbar at bigger screens

<!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">  <title>Navbar</title></head><body><nav class="navbar navbar-default">  <div class="container-fluid">    <!-- Brand and toggle get grouped for better mobile display -->    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">        <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 <span class="sr-only">(current)</span></a></li>        <li><a href="#">Link</a></li>        <li class="dropdown">          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>          <ul class="dropdown-menu">            <li><a href="#">Action</a></li>            <li><a href="#">Another action</a></li>            <li><a href="#">Something else here</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">Separated link</a></li>            <li role="separator" class="divider"></li>            <li><a href="#">One more separated link</a></li>          </ul>        </li>      </ul>      <form class="navbar-form navbar-left" role="search">        <div class="form-group">          <input type="text" class="form-control" placeholder="Search">        </div>        <button type="submit" class="btn btn-default">Submit</button>      </form>    </div><!-- /.navbar-collapse -->  </div><!-- /.container-fluid --></nav></body></html>

---

Related Topics