Bootstrap Menu Examples

Bootstrap Menu component is a responsive navigation bar for using on a website or a web app.

By default, The Bootstrap responsive menu bar collapses (vertically stacks) in small devices phones display lower than 768 pixels .

In this example, I have been experimented with the Bootstrap menu (Navbar component)  and I have made some modification on it through the CSS stylesheet.

By default, if you click on the dropdown menu of the Navigation bar, you will notice, it appears a submenu with one column.  

So I have changed that column to be takes more than one column and also get full width 100%. I have used flex CSS property  to make all their submenus to have the same length, regardless of its content.

Therefore I have changed the bootstrap navigation breakpoint to collapse in small devices tablets display between 768 pixels and 991 pixels You can find the CSS code below and see how you can change the Bootstrap NavBar Breakpoint.

  @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;
    }
}
 

See the Pen Bootstrap Menu Example - 1 by Andreas Eracleous ( @Sp00ky ) on CodePen .