Bootstrap nav bar malfunction

Question

When using bootstrap nav bar, the nav bar does not enter the collapse mode when shrinking the browser window a little as shown in the following images. However, when the window reaches a certain scale, the collapse begins to work as expected. I mean when shrinking the window to test, the nav bar gets broken then it gets collapsed.

Shrinking to half the actual size:

Shrinking to small size

the navbar code:

<nav class="navbar navbar-default" role="navigation">
    <!-- 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="javascript:void(0)">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="javascript:void(0)">Link</a></li>
            <li><a href="javascript:void(0)">Link</a></li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)">Action</a></li>
                    <li><a href="javascript:void(0)">Another action</a></li>
                    <li><a href="javascript:void(0)">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="javascript:void(0)">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>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="javascript:void(0)">Link</a></li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)">Action</a></li>
                    <li><a href="javascript:void(0)">Another action</a></li>
                    <li><a href="javascript:void(0)">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="javascript:void(0)">Separated link</a></li>
                </ul>
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

is there any way to fix this, so the nav bar would immediately enter collapse mode when there isn't enough room for the content inside of it?

bootstrap works with CSS break point. Whatever break points you defined for your CSS media queries it works according to them and not according to how much content you put on your HTML page. So please manage it with break points. — vijayP, Dec 27 '15 at 19:02
@vijayP: I have not changed the bootstrap css, so how can it be done? — Arnold Zahrneinder, Dec 27 '15 at 19:02
may be you can take a look at http://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less — vijayP, Dec 27 '15 at 19:05
@vijayP: I did the solution explained there, but it didn't make any difference. — Arnold Zahrneinder, Dec 27 '15 at 19:09
please be careful while modifying `bootstrap.css`. Search for `navbar-nav` in this file. You will find multiple occurrences of `@media` around `navbar-nav`'s css. By looking at their screen size numbers you can judge which one works for any particular screen resolution. You need to just tweak those numbers correctly. — vijayP, Dec 27 '15 at 19:17
@vijayP: I already did, there was no `@media` code related to the collapse in the original bootstrap file. — Arnold Zahrneinder, Dec 27 '15 at 19:18
This is not a case of **navbar malfunction**. It's a case of **navbar misuse**. Perhaps you want to put your search in a dropdown that opens when clicking on a search icon when on medium width displays? — tao, Dec 27 '15 at 20:47

Chris Bryant · Accepted Answer · 2021-04-01T15:25:46.163

navbar example
I believe the easiest solution is to wrap the navbar in a bootstrap div class "navbar-wrapper".

<div class="navbar-wrapper">
        <nav class="navbar navbar-default" role="navigation">
    <!-- 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">
            <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="javascript:void(0)">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="javascript:void(0)">Link</a></li>
            <li><a href="javascript:void(0)">Link</a></li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)">Action</a></li>
                    <li><a href="javascript:void(0)">Another action</a></li>
                    <li><a href="javascript:void(0)">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="javascript:void(0)">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>
        <ul class="nav navbar-nav navbar-right">
            <li><a href="javascript:void(0)">Link</a></li>
            <li class="dropdown">
                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)">Action</a></li>
                    <li><a href="javascript:void(0)">Another action</a></li>
                    <li><a href="javascript:void(0)">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="javascript:void(0)">Separated link</a></li>
                       </ul>
                   </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </nav>
</div><!-- End Navbar wrapper -->

Additionally, you can modify your custom.css file to something like this in order to change the breakpoint / padding. Good luck!

  @media (min-width: 768px) {
    /* Navbar positioning foo */
   .navbar-wrapper {
      margin-top: 20px;
    }

   .navbar-wrapper .container {
      padding-right: 15px;
      padding-left: 15px;
   }

   .navbar-wrapper .navbar {
      padding-right: 0;
      padding-left: 0;
   }

   /* The navbar becomes detached from the top, so we round the corners */
   .navbar-wrapper .navbar {
      border-radius: 4px;
    }

    .navbar-wrapper {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      z-index: 20;
    }

    /* Flip around the padding for proper display in narrow viewports */
    .navbar-wrapper > .container {
      padding-right: 0;
      padding-left: 0;
    }

    .navbar-wrapper .navbar {
      padding-right: 15px;
      padding-left: 15px;
    }

    .navbar-wrapper .navbar .container {
       width: auto;
    }

Bootstrap nav bar malfunction

1 Answers1