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.
The below examples are the different variants of the template's main navigation menus:
<nav class="navbar navbar-expand-lg navbar-inverse bg-primary">
<div class="container">
<a class="navbar-brand" href="#x"><img src="../assets/images/logo-travlinq.png" alt=""></a>
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-toggle" aria-controls="navbar-toggle" 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">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#x" id="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-file-earmark-text mr-5 fs-14 va-middle"></i> <span class="va-middle">Docs</span></a>
<div class="dropdown-menu mega-menu drop-to-center two-columns" aria-labelledby="dropdown">
<div class="row">
<div class="col-lg-6 sub-menu">
<a class="dropdown-item" href="#x"><i class="bi bi-life-preserver mr-5"></i> <span>Help Center</span></a>
<a class="dropdown-item" href="#x"><i class="bi bi-headset mr-5"></i> <span>Help Center 2</span></a>
<a class="dropdown-item" href="#x"><i class="bi bi-layout-text-window-reverse mr-5"></i> <span>Documentation</span></a>
</div><!-- / sub-menu -->
<div class="col-lg-6 sub-menu">
<a class="dropdown-item" href="#x"><i class="bi bi-layout-text-window mr-5"></i> <span>Doc Layout 2</span></a>
<a class="dropdown-item" href="#x"><i class="bi bi-window mr-5"></i> <span>Doc Layout 3</span></a>
<a class="dropdown-item" href="#x"><i class="bi bi-layout-sidebar-inset mr-5"></i> <span>Doc Layout 4</span></a>
</div><!-- / sub-menu -->
</div><!-- / row -->
</div><!-- / dropdown-menu -->
</li><!-- / dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#x" id="dropdown-pages" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="bi bi-window-sidebar mr-5 fs-14 va-middle"></i> <span class="va-middle">Pages</span></a>
<div class="dropdown-menu mega-menu two-columns drop-to-center" aria-labelledby="dropdown-pages">
<div class="row">
<div class="col-lg-6 sub-menu">
<a class="dropdown-item" href="#x"><i class="bi bi-lightbulb mr-5"></i> <span>Knowledgebase</span></a>
<a class="dropdown-item" href="#x"><i class="bi bi-file-post mr-5"></i> <span>Article</span></a>
<a class="dropdown-item" href="#x"><i class="bi bi-life-preserver mr-5"></i> <span>Support</span></a>
</div><!-- / sub-menu -->
<div class="col-lg-6 sub-menu">
<a class="dropdown-item" href="#x"><i class="bi bi-question-circle mr-5"></i> <span>FAQ</span></a>
<a class="dropdown-item" href="#x"><i class="bi bi-envelope-open mr-5"></i> <span>Contact</span></a>
<a class="dropdown-item" href="#x"><i class="bi bi-calendar2-x mr-5"></i> <span>404 Page</span></a>
</div><!-- / sub-menu -->
</div><!-- / row -->
</div><!-- / dropdown-menu -->
</li><!-- / dropdown -->
<li class="nav-item">
<a class="nav-link opc-100" href="#x"><i class="bi bi-person-circle mr-5 fs-14 va-middle bl-1 border-white pl-50"></i> <span class="va-middle">Sign In</span></a>
</li><!-- / nav-item -->
</ul><!-- / navbar-nav -->
<ul class="navbar-button p-0 m-0 ml-5">
<li class="nav-item">
<a href="#x" class="btn btn-sm btn-white"><i class="bi bi-cart2 fs-14 mr-5 text-primary va-middle"></i> <span>Buy Now</span></a>
</li>
</ul>
</div><!-- / navbar-collapse -->
</div><!-- / container-fluid -->
</nav><!-- navbar -->