How to Keep Bootstrap 4 Navbar Items Visible Outside the Collapsed Container?

Bootstrap 4: Displaying Navbar Items Outside Collapsed Container

When using Bootstrap, a common challenge is displaying certain navbar items persistently outside the collapsed container. By default, all navbar items are hidden when the navbar collapses in smaller screens. Let's explore a simple solution to this issue.

The simplest way to keep navbar items visible regardless of the collapse state is by utilizing the flexbox utility classes provided by Bootstrap. This approach avoids the need for additional CSS.

Code Solution

In the following code, the items that need to stay visible during the collapsed state are kept outside the .navbar-collapse div:

<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

In the above code:

• The .d-flex .flex-row classes ensure that the navbar items are displayed horizontally in a row.
• The .order-2 .order-lg-3 class places the items on the far right in smaller screens (order-2) and moves them to the left when the screen size increases (order-lg-3).
• The .order-3 .order-lg-2 class places the collapse button and menu items on the left in smaller screens (order-3) and on the right when the screen size increases (order-lg-2).

By using the flexbox utility classes, we can elegantly control the layout of the navbar, ensuring that certain items remain visible even when the navbar is collapsed.

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