Bootstrap navigation bar collapsing issue

Question

I have written a navigation bar based on the example given in the components link in Bootstrap. But the navigation bar does not collapse in a right way as it is supposed to do. As shown in the process below:

State 1

State 2

State 3

the navigation bar is not collapsed sharply, rather, it will become 2 columns first and then collapse.

I have found a same problem that has been asked previously in stackoverflow . It seems like the problem is caused by the default breaking point defined in bootstrap. However, I do not know where to change the breaking point and how can I do it.

I am using the latest bootstrap version, and following is the snippet of my navigation bar code.

Thanks in advance for any help and advice!

<!--navigation bar-->
    <nav class="navbar navbar-inverse navbar-fixed-top">

        <div class="container">

            <div class="navbar-header"><!--brand and toggle get grouped for better mobile display-->

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navItems">

                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>

                <a class="navbar-brand" href="#">Logo</a><!--end of logo-->

            </div><!--end of logo & collapsing logic-->

            <div class="collapse navbar-collapse" id="navItems">

                <ul class="nav navbar-nav">

                    <li><a href="#main" class="scroll">HOME</a></li>

                    <li><a href="#about" class="scroll">ABOUT</a></li>

                    <li><a href="#work" class="scroll">WORK</a></li>

                    <li><a href="#blog" class="scroll">BLOG</a></li>

                    <li><a href="#contact" class="scroll">CONTACT</a></li>

                </ul><!--end of menu list-->

                <form class="navbar-form navbar-left">

                    <input type="text" class="form-control" placeholder="Search on this site" id="searchInput ">

                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></button>

                </form><!--end of search bar-->

                <ul class="nav navbar-nav navbar-right">

                    <li class="dropdown">

                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><span class="glyphicon glyphicon-user"></span> My Account <span class="caret"></span></a>

                        <ul class="dropdown-menu" role="menu">

                            <li><a href="#"><span class="glyphicon glyphicon-wrench"></span> Settings</a></li>

                            <li><a href="#"><span class="glyphicon glyphicon-refresh"></span> Update Profile</a></li>

                            <li class="divider"></li>

                            <li><a href="#"><span class="glyphicon glyphicon-off"></span> Sign Out</a></li>

                        </ul><!--end of sub menu-->

                    </li><!--end of dropdown menu-->

                </ul><!end of the user account menu-->

            </div><!--end of collpased nav-->

        </div><!--end of container-->

    </nav><!--end of navbar-->

Update

I have looked into the solution provide by this link , which does not work in the newest version of Bootstrap.

And I have locate the code block which defines the breakpoint of the collapsing effect:

@media (min-width: 768px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    visibility: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}

And I tried to modify the defined min-width, however I changed, it just does not work.

Answer 1

I finally figured it out:

To do this in the latest version:

I have modified three parts in the css file:

First you need to set when the navbar-header will float to left (in may case 1000px):

@media (min-width: 1000px) {
  .navbar-header {
    float: left;
  }
}

Then you will need to decide when all the menu button will be disappeared:

@media (min-width: 1000px) {
  .navbar-collapse {
    width: auto;
    border-top: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    visibility: visible !important;
  }
  .navbar-collapse.in {
    overflow-y: visible;
  }
  .navbar-fixed-top .navbar-collapse,
  .navbar-static-top .navbar-collapse,
  .navbar-fixed-bottom .navbar-collapse {
    padding-right: 0;
    padding-left: 0;
  }
}

Last you need to define when the navbar-toggle will take effect:

@media (min-width: 1000px) {
  .navbar-toggle {
    display: none;
  }
} 

Then just wait to see the magic happen:

When the screen reached the 1000px threshold:

From

To

Answer 2

Seems like you should be able to override the default navbar collapse point like this.. (Assuming 1000 pixels in the new collapse point):

@media (max-width: 1000px) {
    .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;
    }
    .collapse.in{
        display:block !important;
    }
}

Demo: http://bootply.com/UQaiG0oNTR

Answer 3

I suggest installing Bootstrap with SASS , in this way mixins are separeted and easier to manage.

With this configuiration the breaking-point is in your _variable mixins, and the _navbar mixin just picks up the variable by default.

Overriding will work but it's probably neater if you keep coherency with bootstrap mixins.

Answer 4

Read the documentation that you yourself linked to!

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:

• Reduce the amount or width of navbar items.
• Hide certain navbar items at certain screen sizes using responsive utility classes.
• 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.