Disable responsive (mobile) navbar in Bootstrap

by

Bootstrap 5 (update 2021)

The navbar-expand* class are still used in Bootstrap 5. Therefore if you want to prevent the Navbar from collapsing (stacking vertically) use navbar-expand. Due to changes in padding, Bootstrap 5 Navbars do require an inner container.

Bootstrap 4 (original answer)

The simplest way is using the navbar-toggleable-xl navbar-expand class (now in Bootstrap 4) so that the menu is non-mobile (horizontal) at all widths..

<nav class="navbar navbar-expand navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

Demo: Bootstrap 4 Disable Responsive Navbar

You can also use the flexbox utilities to prevent the vertical navbar on smaller screens. The flex-nowrap flex-row allow the navbar to remain horizontal at all widths…

<nav class="navbar navbar-light bg-faded justify-content-between flex-nowrap flex-row">
    <a href="/" class="navbar-brand">PIM</a>
    <ul class="nav navbar-nav flex-row">
        <li class="nav-item"><a class="nav-link pr-3" href="/login">Login</a></li>
        <li class="nav-item"><a class="nav-link" href="/signup">Sign up</a></li>
    </ul>
</nav>

How it works:

navbar-expand — always horizontal, non collapsing
navbar-expand-xl — collapses into mobile < 1200px
navbar-expand-lg — collapses into mobile < 992px
navbar-expand-md — collapses into mobile < 768px
navbar-expand-sm — collapses into mobile < 576px

no navbar-expand — always mobile,collapsed (default)

http://codeply.com/go/z9VJTOBuaS

More Related Contents:

  1. Change navbar color in Twitter Bootstrap
  2. Center the content inside a column in Bootstrap
  3. Left align and right align within div in Bootstrap
  4. Why is the Bootstrap Navbar always collapsed? [duplicate]
  5. Bootstrap 4 Navbar align logo center and toggle icon on the left
  6. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  7. Using media breakpoints in Bootstrap 4-alpha
  8. Bootstrap – I don’t want columns to have the same height
  9. Unable to override $theme-color in bootstrap
  10. Bootstrap align navbar items to the right
  11. Bootstrap 3 Navbar Collapse
  12. Center an element in Bootstrap Navbar
  13. How to extend/modify (customize) Bootstrap with SASS
  14. Bootstrap Rows and Columns – Do I need to use row?
  15. Missing visible-** and hidden-** in Bootstrap v4
  16. Responsive website zoomed out to full width on mobile
  17. Bootstrap – row can I have columns add up to more then 12?
  18. Bootstrap 4 – Navbar items outside the collapse
  19. Wrapping bootstrap columns in extra div
  20. How to create new breakpoints in bootstrap 4 using CDN?
  21. Bootstrap 4 Multiple fixed-top navbars
  22. How to left column fixed and right scrollable in Bootstrap 4, responsive?
  23. Bootstrap navbar: nothing is displayed on smaller devices
  24. How can I center an image in Bootstrap?
  25. Bootstrap 5 – Custom theme-colors not updating classes
  26. How can I get my Twitter Bootstrap buttons to right align?
  27. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  28. How to make a Bootstrap 4 full width dropdown in Navbar?
  29. Bootstrap Navbar list items/links not showing
  30. How to change Bootstrap navbar collapse breakpoint

Leave a Comment