Bootstrap 3 Navbar Collapse

by

I had the same problem today.

Bootstrap 4

It’s a native functionality: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

You have to use .navbar-expand{-sm|-md|-lg|-xl} classes:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

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

Just change 991px by 1199px for md sizes.

Demo

More Related Contents:

  1. Decreasing height of bootstrap 3.0 navbar
  2. How to justify navbar-nav in Bootstrap 3
  3. Five equal columns in twitter bootstrap
  4. Bootstrap Rows and Columns – Do I need to use row?
  5. What is the difference between Bootstrap .container and .container-fluid classes?
  6. Responsive website zoomed out to full width on mobile
  7. Bootstrap Fluid grid system with different height
  8. Bootstrap 3 Navbar with Logo
  9. Disable responsive (mobile) navbar in Bootstrap
  10. Updating Bootstrap to version 3 – what do I have to do?
  11. Bootstrap – row can I have columns add up to more then 12?
  12. Bootstrap 3 breakpoints and media queries
  13. Stacked Tabs in Bootstrap 3
  14. Bootstrap 3 – Why is row class is wider than its container?
  15. bootstrap 4 responsive utilities visible / hidden xs sm lg not working
  16. How to create a sticky left sidebar menu using bootstrap 3?
  17. How to use Twitter Bootstrap 3 for non-responsive site? [duplicate]
  18. Bootstrap 4 Navbar align logo center and toggle icon on the left
  19. BootStrap3 keep the dropdown menu open after click on the item
  20. Should I use Bootstrap from CDN or make a copy on my server?
  21. Bootstrap 3.0 – Fluid Grid that includes Fixed Column Sizes
  22. Bootstrap 3 Gutter Size
  23. What’s the tabindex=”-1″ in bootstrap for
  24. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  25. Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
  26. Different slide duration for each item on bootstrap 3.1 carousel
  27. How can I get my Twitter Bootstrap buttons to right align?
  28. Binding to Collapse event in Twitter Bootstrap 3
  29. Disable Bootstrap 3 navbar going 2 rows in medium viewport size
  30. How to slide nav bar from left instead from top?

Leave a Comment