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

Bootstrap 4: Persistent Navbar Items Outside Collapsed Container

Navigating a website can be frustrating when important links, such as social media icons, disappear when the navbar collapses on smaller screens. Fortunately, Bootstrap 4 offers an elegant solution to keep certain navbar items visible even when the menu is collapsed.

Problem

The issue arises when the navbar is set to collapse when the screen width becomes narrow. This behavior is controlled by the .collapse class. By default, all elements within the .collapse container are hidden when the collapse is activated.

Solution

To keep certain navbar items from disappearing with the collapse, simply move them outside the .collapse container. This can be achieved using the order-* utility classes to adjust the flexbox order of the elements.

Code Example

<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>

In this example, the social media icons are placed within a container outside the .collapse element. The d-flex and order-* classes ensure that the icons remain in the correct order and position when the navbar is collapsed.

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