Bootstrap Menu not collapsing correctly

Question

We're building a website using bootstrap and having a bit of a problem with the menu.

If you look at http://www.tempsite.co.uk/bstrp/ - The top menu appears fine and it also collapes ok when viewing on a mobile device.

However, when I try to reduce the size of my browser to see the breaking points, there a point in which the menu doesn't collapse correctly.

It's between medium and small.

Any ideas? Thanks!

Answer 1

you can do this by changing the breakpoint for the grid system or overriding the css so that the navbar will be collapsed for medium devices (tablets) using the following code:

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-collapse.collapse.in {
        display: block!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-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.6px -16px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}