How to Keep Navbar Items Visible Outside the Collapse in Bootstrap 4?

Navbar Items Outside the Collapse in Bootstrap 4

Problem: Maintaining persistent navbar links outside the collapsed container in Bootstrap 4 has been a nagging issue. Users desire links that stay visible even when the navigation bar is collapsed.

Solution:

Using the flexbox utility classes is the most straightforward method to address this issue. Keep the persistent items out of 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>

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

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