Twitter Bootstrap 3 How to Activate Navbar-Collapse on Small Devices

Twitter bootstrap 3 how to activate navbar-collapse on small devices

By default, the breakpoint is @screen-sm-min (ie ≥768px).

View an Example

Customize the navbar breakpoint

To customize the navbar breakpoint, change the less variable @grid-float-breakpoint.

From the documentation:

Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
...
c. Change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

You can use Bootstrap's customization tool to build a modified version of Bootstrap. From here, you can alter @grid-float-breakpoint to another breakpoint defined by Bootstrap (ie, xs, sm, md, lg) or a set amount (ie 500px).

When you're finished, navigate to the Download section, and click Compile and Download

Edit

Your markup works as expected, as well: http://jsbin.com/kuxah/1/edit?html,output

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 navbar doesn't collapse on small screen device

You're missing a few things: collapse and navbar-toggle. See example.

<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.5/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<header>

  <div class="container">

    <nav class="navbar navbar-inverse navbar-fixed-top">

      <div class="container-fluid">

        <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="index.html">

            <img src="img/logo.png" class="logo" alt="Tweakwebs | Web Design And Development" />

          </a>

        </div>

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

          <ul class="nav navbar-nav">

            <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a>

            </li>

            <li><a href="#service">Service</a>

            </li>

            <li><a href="#pricing">Pricing</a>

            </li>

            <li><a href="#about">About</a>

            </li>

            <li><a href="#contact">Contact</a>

            </li>

            <li><a href="#disclaimers">Disclaimers</a>

            </li>

          </ul>

        </div>

        <div class="nav navbar-btn navbar-right">

          <button class="btn btn-primary"><span class="glyphicon glyphicon-user"></span> Login</button>

          <button class="signupbtn btn btn-primary"><span class="glyphicon glyphicon-pencil"></span> Signup</button>

        </div>

      </div>

    </nav>

  </div>

  <!-- end of container -->

</header>

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>

Twitter Bootstrap 3 fixed navbar collapse in horizontal mode

So, I figured out my issue. The collapsed area didn't have the "navbar-collapse" class in it which was needed for collapse to function properly. So instead of:

<div class="navbar-inverse-collapse collapse">

It should have been:

<div class="navbar-inverse-collapse navbar-collapse collapse">

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.

Twitter Bootstrap 3 navbar collapse

The dropdown element is taking up the whole navbar width and is preventing the button from working, to fix things you can set a higher z-index to your brand link and to the navbar-toggle button:

.navbar-sam-main .navbar-toggle, .navbar-sam-main .navbar-brand {
    position: relative;
    z-index:1;
}

For the other issues that were brought up in the comments section, the fixes were to wrap the dropdown link and the caret in a span to make them wrap as a single element and using a media query to have the link display in the center when it falls to a second line:

HTML

<li class="dropdown" id="users"> 
    <span>
        <a class="navbar-link" href="" title="aaa" style="display:inline-block;padding-right:0px;">
            <img src="" width="24" height="24" alt="aaaa" />
            MyName
        </a>
        <a class="dropdown-toggle" data-toggle="dropdown" href="#users"  style="display:inline-block;padding-left:0px;">
            <b class="caret" style="border-left: 6px solid transparent; border-right: 6px solid transparent;  border-top: 6px solid #999;"></b>
        </a>
    </span>
    <ul class="dropdown-menu">
        ...
    </ul>
</li>

CSS

.navbar-sam-main .navbar-nav > li >span {
    display: inline-block;
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}
.navbar-sam-main .navbar-nav > li >span .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

@media (max-width: 270px) {
    #myContent1 > li.dropdown {
        text-align: center;
    }
    #myContent1 > li.dropdown >ul {
        text-align:left;
    }
}

Twitter Bootstrap 3 How to Activate Navbar-Collapse on Small Devices