How to Keep Navbar Items Visible When the Navbar Collapses in Bootstrap 4?

Bootstrap 4 Navbar Items That Persist Outside the Collapse's Influence

In Bootstrap 4, maintaining persistent navbar items outside the collapsed container can be a challenge. Here's a detailed explanation and a fix for this issue:

Problem Statement:

When the navbar collapses, items that belong outside the collapsed section become hidden, leading to the undesirable effect shown in the provided images.

Solution:

The following solution utilizes flexbox utility classes to keep the persistent items outside the collapsible area:

<code class="html"><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></code>

Explanation:

• The persistent items are placed within a
  with the classes d-flex, flex-row, order-2, and order-lg-3.
• This div stays in the same order regardless of the breakpoint, ensuring that the persistent items are always visible.
• The collapse navbar-collapse div is given the classes order-3 and order-lg-2.
• These classes specify that the collapsible items should appear last (order-3) in the collapsed/mobile breakpoint and second (order-2) in the other breakpoints.
• The navbar-light and navbar-expand-lg classes provide the appropriate styling for the navbar.

This solution ensures that the persistent navbar items remain visible even when the navbar collapses.

The above is the detailed content of How to Keep Navbar Items Visible When the Navbar Collapses in Bootstrap 4?. For more information, please follow other related articles on the PHP Chinese website!