Navbars

Navbar Colors

Theming the navbar has never been easier thanks to the combination of theming classes and background-color utilities. Choose from .navbar-light for use with light background colors, or .navbar-inverse for dark background colors. Then, customize with .bg-* utilities.

<nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container">
        <a class="navbar-brand" href="#x">
            <img src="../assets/images/logo.png" alt="" class="hide-dark-mode d-ib">
            <img src="../assets/images/logo-light.png" alt="" class="hide-light-mode d-ib">
        </a>
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle1" aria-controls="navbar-toggle1" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button><!-- / navbar-toggler -->

        <div class="collapse navbar-collapse" id="navbar-toggle1">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#x"><span>Home</span></a>
                </li><!-- / nav-item -->

                <li class="nav-item">
                    <a class="nav-link" href="#x"><span>About</span></a>
                </li><!-- / nav-item -->
            </ul><!-- / navbar-nav -->

            <ul class="navbar-button p-0 m-0 ml-25">
                <li class="nav-item">
                    <a href="#x" class="btn btn-primary"><i class="bi-cart3 mr-5 va-middle"></i> <span>Buy Now</span></a>
                </li>
            </ul><!-- / navbar-button -->
        </div><!-- / navbar-collapse -->
    </div><!-- / container-fluid -->
</nav><!-- / navbar-light -->

Menu Lines

The Menu Line effect can be accomplished by adding .menu-line CSS Class to the navbar and wrap all nav-links in <span> tags.

<nav class="navbar navbar-expand-lg navbar-light bg-white menu-line">
    <div class="container">
        <a class="navbar-brand" href="#x">
            <img src="../assets/images/logo.png" alt="" class="hide-dark-mode d-ib">
            <img src="../assets/images/logo-light.png" alt="" class="hide-light-mode d-ib">
        </a>
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-line" aria-controls="navbar-toggle-line" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button><!-- / navbar-toggler -->

        <div class="collapse navbar-collapse" id="navbar-toggle-line">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#x"><span>Home</span></a>
                </li><!-- / nav-item -->

                <li class="nav-item">
                    <a class="nav-link" href="#x"><span>Page</span></a>
                </li><!-- / nav-item -->
            </ul><!-- / navbar-nav -->

            <ul class="navbar-button p-0 m-0 ml-25">
                <li class="nav-item">
                    <a href="#x" class="btn btn-primary"><i class="bi-star mr-5 va-middle"></i> <span>Button</span></a>
                </li>
            </ul><!-- / navbar-button -->
        </div><!-- / navbar-collapse -->
    </div><!-- / container-fluid -->
</nav><!-- / navbar -->

Menu Pills

The Menu Pills style can be accomplished by adding .custom-menu.menu-pills CSS Class to the navbar, the pills will be showing on active nav-links and on nav-link hover.

<nav class="navbar navbar-expand-lg navbar-light bg-white custom-menu menu-pills">
    <div class="container">
        <a class="navbar-brand" href="#x">
            <img src="../assets/images/logo.png" alt="" class="hide-dark-mode d-ib">
            <img src="../assets/images/logo-light.png" alt="" class="hide-light-mode d-ib">
        </a>
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-pills" aria-controls="navbar-toggle-pills" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button><!-- / navbar-toggler -->

        <div class="collapse navbar-collapse" id="navbar-toggle-pills">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#x"><i class="bi-house-door mr-5"></i> <span>Home</span></a>
                </li><!-- / nav-item -->

                <li class="nav-item">
                    <a class="nav-link" href="#x"><i class="bi-envelope-open mr-5"></i> <span>Contact</span></a>
                </li><!-- / nav-item -->
            </ul><!-- / navbar-nav -->
        </div><!-- / navbar-collapse -->
    </div><!-- / container-fluid -->
</nav><!-- / navbar -->

Split Menu

The Split Menu layout can be accomplished by adding .custom-menu.split-menu CSS Class to the navbar and there are 2 navbar-barnds, one splitting the 2 navbar-toggles to accomplish the split layout.

<nav class="navbar navbar-expand-lg navbar-light bg-white custom-menu split-menu">
    <div class="container">
        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-split-left" aria-controls="navbar-toggle-split-left" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button><!-- / navbar-toggler -->

        <a class="navbar-brand mobile-brand m-auto" href="#x"><img src="../assets/images/logo-small.png" alt=""></a>

        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-split-right" aria-controls="navbar-toggle-split-right" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button><!-- / navbar-toggler -->

        <div class="collapse navbar-collapse" id="navbar-toggle-split-left">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link active pl-0" href="#x"><span>Active</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#x"><span>Link</span></a>
                </li>
            </ul><!-- / navbar-nav -->
        </div><!-- / navbar-collapse -->

        <a class="navbar-brand m-auto" href="#x"><img src="../assets/images/logo-small.png" alt=""></a>

        <div class="collapse navbar-collapse" id="navbar-toggle-split-right">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#x"><span>Right</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link last-menu-item" href="#x"><span>Link</span></a>
                </li>
            </ul><!-- / navbar-nav -->
        </div><!-- / navbar-collapse -->
    </div><!-- / container -->
</nav><!-- / navbar -->

Center Menu

The Center Menu layout can be accomplished by adding .m-auto CSS Class to the navbar-nav. Additionally, we can add a button using navbar-button, form, icon(s) or any small content to the right of the menu to avoid having a blank space on the right, on this example we are using a navbar-button.

<nav class="navbar navbar-expand-lg navbar-light bg-white">
    <div class="container">
        <a class="navbar-brand" href="#x">
            <img src="../assets/images/logo.png" alt="" class="hide-dark-mode d-ib">
            <img src="../assets/images/logo-light.png" alt="" class="hide-light-mode d-ib">
        </a>

        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-nav-center" aria-controls="navbar-toggle-nav-center" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button><!-- / navbar-toggler -->

        <div class="collapse navbar-collapse" id="navbar-toggle-nav-center">
            <ul class="navbar-nav m-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#x">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#x">Link</a>
                </li>
            </ul><!-- / navbar-nav -->

            <ul class="navbar-button">
                <li class="nav-item">
                    <a href="#x" class="btn btn-primary nav-button"><i class="bi-cart3 mr-10"></i><span>Buy Now</span></a>
                </li>
            </ul><!-- / navbar-button -->
        </div><!-- / navbar-collapse -->
    </div><!-- / container -->
</nav><!-- / navbar -->

Stacked Menu

The Stacked Menu layout can be accomplished by adding .stacked-menu CSS Class to the navbar and .m-auto to the navbar-nav.

<nav class="navbar navbar-expand-lg navbar-light bg-white stacked-menu">
    <div class="container">
        <a class="navbar-brand" href="#x">
            <img src="../assets/images/logo.png" alt="" class="hide-dark-mode d-ib">
            <img src="../assets/images/logo-light.png" alt="" class="hide-light-mode d-ib">
        </a>

        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle-nav-stacked" aria-controls="navbar-toggle-nav-stacked" aria-expanded="false" aria-label="Toggle navigation">
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
            <span class="sr-only">Toggle navigation</span>
        </button><!-- / navbar-toggler -->

        <div class="collapse navbar-collapse" id="navbar-toggle-nav-stacked">
            <ul class="navbar-nav m-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#x">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#x">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#x">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#x">Contact</a>
                </li>
            </ul><!-- / navbar-nav -->
        </div><!-- / navbar-collapse -->
    </div><!-- / container -->
</nav><!-- / navbar -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav