Navbar dark
<!-- Navbar Dark --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark z-index-3 py-3"> <div class="container"> <a class="navbar-brand text-white" href="https://demos.creative-tim.com/now-ui-design-system-pro/presentation.html" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank"> Now UI Design System PRO </a> <a href="https://www.creative-tim.com/product/now-ui-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary btn-round mb-0 ms-auto d-lg-none d-block">Buy Now</a> <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon mt-2"> <span class="navbar-toggler-bar bar1"></span> <span class="navbar-toggler-bar bar2"></span> <span class="navbar-toggler-bar bar3"></span> </span> </button> <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation"> <ul class="navbar-nav navbar-nav-hover mx-auto"> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button"> Pages <img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button"> Account <img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button"> Blocks <img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> <li class="nav-item dropdown dropdown-hover mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button"> Docs <img src="../../assets/img/down-arrow-white.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> </ul> <ul class="navbar-nav d-lg-block d-none"> <li class="nav-item"> <a href="https://www.creative-tim.com/product/now-ui-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary btn-round mb-0 me-1" role="button">Buy Now</a> </li> </ul> </div> </div> </nav> <!-- End Navbar -->
Navbar light
<!-- Navbar Light --> <nav class="navbar navbar-expand-lg navbar-light bg-white z-index-3 py-3"> <div class="container"> <a class="navbar-brand" href="https://demos.creative-tim.com/now-ui-design-system-pro/presentation.html" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank"> Now UI Design System PRO </a> <a href="https://www.creative-tim.com/product/now-ui-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary btn-round mb-0 ms-auto d-lg-none d-block">Buy Now</a> <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon mt-2"> <span class="navbar-toggler-bar bar1"></span> <span class="navbar-toggler-bar bar2"></span> <span class="navbar-toggler-bar bar3"></span> </span> </button> <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation"> <ul class="navbar-nav navbar-nav-hover mx-auto"> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button"> Pages <img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button"> Account <img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button"> Blocks <img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" role="button"> Docs <img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> </ul> <ul class="navbar-nav d-lg-block d-none"> <li class="nav-item"> <a href="https://www.creative-tim.com/product/now-ui-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary btn-round mb-0 me-1" role="button">Buy Now</a> </li> </ul> </div> </div> </nav> <!-- End Navbar -->
Navbar transparent
<!-- Navbar Transparent --> <nav class="navbar navbar-expand-lg position-absolute top-0 z-index-3 w-100 shadow-none my-3 navbar-transparent"> <div class="container"> <a class="navbar-brand" href="https://demos.creative-tim.com/now-ui-design-system-pro/presentation.html" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom" target="_blank"> Now UI Design System PRO </a> <button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon mt-2"> <span class="navbar-toggler-bar bar1"></span> <span class="navbar-toggler-bar bar2"></span> <span class="navbar-toggler-bar bar3"></span> </span> </button> <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation"> <ul class="navbar-nav navbar-nav-hover mx-auto"> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center text-dark" role="button"> Pages <img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center text-dark" role="button"> Account <img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center text-dark" role="button"> Blocks <img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> <li class="nav-item mx-2"> <a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center text-dark" role="button"> Docs <img src="../../assets/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> </a> </li> </ul> <ul class="navbar-nav d-lg-block d-none"> <li class="nav-item"> <a href="https://www.creative-tim.com/product/now-ui-design-system-pro#pricingCard" class="btn btn-sm bg-gradient-primary btn-round mb-0 me-1" role="button">Buy Now</a> </li> </ul> </div> </div> </nav> <!-- End Navbar --> <!-- End Navbar -->