0

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 enter image description here

State 2 enter image description here

State 3 enter image description here

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.

Community
  • 1
  • 1
fyr91
  • 1,253
  • 5
  • 17
  • 33
  • 3
    Possible duplicate - http://stackoverflow.com/questions/19827605/change-bootstrap-navbar-collapse-breakpoint-without-using-less – Luís P. A. Feb 02 '15 at 15:59
  • Thank you very much, I will try out first. If that solves the problem, I will update the solution. – fyr91 Feb 02 '15 at 16:02
  • It seems that "this doesn't work on Bootstrap 3 because there is another rule navbar-collapse.collapse which has display: block !important. Disabling that will result in the collapse button not appearing... ...a lot of classes that needs to be redefined, not just collapse" according to @Daniele Ricci – fyr91 Feb 02 '15 at 16:11

4 Answers4

0

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

enter image description here

To

enter image description here

fyr91
  • 1,253
  • 5
  • 17
  • 33
0

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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

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.

maioman
  • 18,154
  • 4
  • 36
  • 42
  • This should probably be written as a comment instead of an answer, as this doesn't actually answer the original question. It's a valid point, but an incomplete answer. – Tim Lewis Feb 02 '15 at 16:56
  • the OP was talking about breakpoint; even if you can find a precompiled Bootstrap CSS , breakpoint value is compiled in the _variable mixin so for me it's important to know where that value comes from.. – maioman Feb 02 '15 at 17:05
  • Look at the two answers on this post. They both solve the issue using CSS. Yours adds a suggestion, but doesn't provide a complete answer, hence why I recommend added it as a comment. – Tim Lewis Feb 02 '15 at 17:07
0

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.
cvrebert
  • 9,075
  • 2
  • 38
  • 49