Bootstrap 4 – Navbar items outside the collapse

by

The simplest way is using the flexbox utility classes, so no extra CSS is needed. Keep the items you always want to show out of the navbar-collapse div.

https://www.codeply.com/go/TWZGiy3VGw

<nav class="navbar fixed-top navbar-light navbar-expand-lg navbar-template">
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="d-flex flex-row order-2 order-lg-3">
        <ul class="navbar-nav flex-row">
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-facebook"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-twitter"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-youtube"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-linkedin"></span></a></li>
        </ul>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse order-3 order-lg-2" id="navbarNavDropdown">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Features</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Dropdown link</a>
                <div class="dropdown-menu dropdown-menu-right">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

Notice the use the responsive order-* classes to ensure the collapse menu items remain last (order-3) when in the collapsed/mobile breakpoint.

More Related Contents:

  1. Change navbar color in Twitter Bootstrap
  2. Center an element in Bootstrap Navbar
  3. How to make a Bootstrap 4 full width dropdown in Navbar?
  4. Bootstrap Navbar list items/links not showing
  5. Vertical Align Center in Bootstrap 4 [duplicate]
  6. Bootstrap NavBar with left, center or right aligned items
  7. Center content in responsive bootstrap navbar
  8. Order columns through Bootstrap4
  9. Bootstrap Center Vertical and Horizontal Alignment
  10. How to change the bootstrap primary color?
  11. Animate/Shrink NavBar on scroll using Bootstrap
  12. Remove gutter space for a specific div only
  13. How can I change the Bootstrap 4 navbar button icon color?
  14. Bootstrap with different order on mobile version
  15. How to build a 2 Column (Fixed – Fluid) Layout with Twitter Bootstrap?
  16. What is class=”mb-0″ in Bootstrap 4?
  17. Customize Bootstrap 4’s grid-system Breakpoints
  18. Bootstrap change order of columns
  19. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  20. Bootstrap navbar: nothing is displayed on smaller devices
  21. Table column sizing
  22. Bootstrap 4 card-deck with number of columns based on viewport
  23. Centering the image in Bootstrap
  24. Mysterious whitespace in between Bootstrap2 Navbar and row underneath
  25. how to change bootstrap version 4 button color
  26. Vertically align Bootstrap badge inside heading
  27. How do I make card-columns order horizontally?
  28. How to use CSS position sticky to keep a sidebar visible with Bootstrap 4
  29. Centering the navbar content in Bootstrap 4 (alpha 5)
  30. How to change Bootstrap navbar collapse breakpoint

Leave a Comment