Blocks - Navbar
Copy any custom block snippet below and paste it on your page to build your website easily.
Note that since we show multiple navbar examples on docs, offcanvas navigation, offcanvas info and modals are disabled on the examples, but their codes are intact and will work properly on the template.
<nav class="navbar navbar-expand-lg center-nav transparent navbar-light">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo-dark.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto" data-sm-skip="true">
<li class="nav-item dropdown language-select text-uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item d-none d-md-block">
<a href="./contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar.html', {
"classList": "center-nav transparent navbar-light",
"logoAlt": "logo-dark",
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})Center Nav - Transparent Background - Light Text
<nav class="navbar navbar-expand-lg center-nav transparent navbar-dark">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img class="logo-dark" src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto" data-sm-skip="true">
<li class="nav-item dropdown language-select text-uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item d-none d-md-block">
<a href="./contact.html" class="btn btn-sm btn-white rounded-pill">Contact</a>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar.html', {
"classList": "center-nav transparent navbar-dark",
"logoBoth": true,
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-white rounded-pill",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})Center Nav - Light Background
<nav class="navbar navbar-expand-lg center-nav navbar-light navbar-bg-light">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto" data-sm-skip="true">
<li class="nav-item dropdown language-select text-uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item d-none d-md-block">
<a href="./contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar.html', {
"classList": "center-nav navbar-light navbar-bg-light",
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})Center Nav - Dark Background
<nav class="navbar navbar-expand-lg center-nav navbar-dark navbar-bg-dark">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto" data-sm-skip="true">
<li class="nav-item dropdown language-select text-uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item d-none d-md-block">
<a href="./contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar.html', {
"classList": "center-nav navbar-dark navbar-bg-dark",
"logoLight": true,
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})Center Nav - Fancy
Check out some of the live examples: Demo 7.
<nav class="navbar navbar-expand-lg fancy navbar-light navbar-bg-light caret-none">
<div class="container">
<div class="navbar-collapse-wrapper bg-white d-flex flex-row flex-nowrap w-100 justify-content-between align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other w-100 d-flex ms-auto">
<ul class="navbar-nav flex-row align-items-center ms-auto" data-sm-skip="true">
<li class="nav-item dropdown language-select text-uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item d-none d-md-block">
<a href="./contact.html" class="btn btn-sm btn-primary rounded-pill">Contact</a>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar.html', {
"classList": "fancy navbar-light navbar-bg-light caret-none",
"fancy": true,
"otherClassList": "w-100 d-flex ms-auto",
"otherLanguageSelect": true,
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Contact",
"otherBtnLink": "@@webRoot/contact.html"
})<nav class="navbar navbar-expand-lg classic transparent navbar-light">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-lg-4">
<ul class="navbar-nav flex-row align-items-center ms-auto" data-sm-skip="true">
<li class="nav-item"><a class="nav-link" data-toggle="offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-01">Sign In</a>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
<div class="offcanvas-info text-inverse">
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-info-close" aria-label="Close"></button>
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:[email protected]">[email protected]</a><br /> +00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-info -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="modal fade" id="modal-01" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h3 class="mb-4">Login to Sandbox</h3>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Log In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->@@include('_navbar.html', {
"classList": "classic transparent navbar-light",
"otherClassList": "ms-lg-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})Classic - Transparent Background - Light Text
Check out some of the live examples: Demo 11.
<nav class="navbar navbar-expand-lg classic transparent navbar-dark">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img class="logo-dark" src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-lg-4">
<ul class="navbar-nav flex-row align-items-center ms-auto" data-sm-skip="true">
<li class="nav-item"><a class="nav-link" data-toggle="offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-white rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-01">Sign In</a>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
<div class="offcanvas-info text-inverse">
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-info-close" aria-label="Close"></button>
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:[email protected]">[email protected]</a><br /> +00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-info -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="modal fade" id="modal-01" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h3 class="mb-4">Login to Sandbox</h3>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Log In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->@@include('_navbar.html', {
"classList": "classic transparent navbar-dark",
"logoBoth": true,
"otherClassList": "ms-lg-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-white rounded-pill",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})Classic - Light Background
<nav class="navbar navbar-expand-lg classic navbar-light navbar-bg-light">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-lg-4">
<ul class="navbar-nav flex-row align-items-center ms-auto" data-sm-skip="true">
<li class="nav-item"><a class="nav-link" data-toggle="offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-01">Sign In</a>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
<div class="offcanvas-info text-inverse">
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-info-close" aria-label="Close"></button>
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:[email protected]">[email protected]</a><br /> +00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-info -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="modal fade" id="modal-01" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h3 class="mb-4">Login to Sandbox</h3>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Log In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->@@include('_navbar.html', {
"classList": "classic navbar-light navbar-bg-light",
"otherClassList": "ms-lg-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})Classic - Dark Background
<nav class="navbar navbar-expand-lg classic navbar-dark navbar-bg-dark">
<div class="container flex-lg-row flex-nowrap align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-lg-4">
<ul class="navbar-nav flex-row align-items-center ms-auto" data-sm-skip="true">
<li class="nav-item"><a class="nav-link" data-toggle="offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-01">Sign In</a>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
<div class="offcanvas-info text-inverse">
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-info-close" aria-label="Close"></button>
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:[email protected]">[email protected]</a><br /> +00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-info -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="modal fade" id="modal-01" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h3 class="mb-4">Login to Sandbox</h3>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Log In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->@@include('_navbar.html', {
"classList": "classic navbar-dark navbar-bg-dark",
"logoLight": true,
"otherClassList": "ms-lg-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})Classic - Fancy
<nav class="navbar navbar-expand-lg fancy navbar-light navbar-bg-light">
<div class="container">
<div class="navbar-collapse-wrapper bg-white d-flex flex-row flex-nowrap w-100 justify-content-between align-items-center">
<div class="navbar-brand w-100">
<a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a>
</div>
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-lg-4">
<ul class="navbar-nav flex-row align-items-center ms-auto" data-sm-skip="true">
<li class="nav-item"><a class="nav-link" data-toggle="offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item d-none d-md-block">
<a href="#" class="btn btn-sm btn-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-01">Sign In</a>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
<div class="offcanvas-info text-inverse">
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-info-close" aria-label="Close"></button>
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:[email protected]">[email protected]</a><br /> +00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-info -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="modal fade" id="modal-01" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content text-center">
<div class="modal-body">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<h3 class="mb-4">Login to Sandbox</h3>
<form class="text-start mb-3">
<div class="form-floating mb-4">
<input type="email" class="form-control" placeholder="Email" id="loginEmail">
<label for="loginEmail">Email</label>
</div>
<div class="form-floating mb-4">
<input type="password" class="form-control" placeholder="Password" id="loginPassword">
<label for="loginPassword">Password</label>
</div>
<a class="btn btn-primary rounded-pill btn-login w-100 mb-2">Log In</a>
</form>
<!-- /form -->
<p class="mb-1"><a href="#" class="hover">Forgot Password?</a></p>
<p class="mb-0">Don't have an account? <a href="#" class="hover">Sign up</a></p>
<div class="divider-icon my-4">or</div>
<nav class="nav social justify-content-center text-center">
<a href="#" class="btn btn-circle btn-sm btn-google"><i class="uil uil-google"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-facebook-f"><i class="uil uil-facebook-f"></i></a>
<a href="#" class="btn btn-circle btn-sm btn-twitter"><i class="uil uil-twitter"></i></a>
</nav>
<!--/.social -->
</div>
<!--/.modal-content -->
</div>
<!--/.modal-body -->
</div>
<!--/.modal-dialog -->
</div>
<!--/.modal -->@@include('_navbar.html', {
"classList": "fancy navbar-light navbar-bg-light",
"fancy": true,
"otherClassList": "ms-lg-4",
"otherBtn": true,
"otherBtnClassList": "btn-sm btn-primary rounded-pill",
"otherBtnText": "Sign In",
"otherBtnModal": true,
"otherInfo": true
})Center Logo - Transparent Background
<nav class="navbar navbar-expand-lg center-logo transparent navbar-light">
<div class="container justify-content-between align-items-center">
<div class="d-flex flex-row w-100 justify-content-between align-items-center d-lg-none">
<div class="navbar-brand"><a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center" data-sm-skip="true">
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper d-flex flex-row align-items-center w-100">
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header mx-lg-auto order-0 order-lg-1 d-lg-flex px-lg-15">
<a href="./index.html" class="d-none d-lg-flex"><img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<a href="./index.html" class="d-lg-none"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close d-md-none" aria-label="Close"></button>
</div>
<div class="w-100 order-1 order-lg-0 d-lg-flex">
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="w-100 order-3 order-lg-2 d-lg-flex">
<ul class="navbar-nav me-lg-auto">
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar-center-logo.html', {
"classList": "center-logo transparent navbar-light"
})Center Logo - Transparent Background - Light Text
Check out some of the live examples: Demo 13.
<nav class="navbar navbar-expand-lg center-logo transparent navbar-dark">
<div class="container justify-content-between align-items-center">
<div class="d-flex flex-row w-100 justify-content-between align-items-center d-lg-none">
<div class="navbar-brand"><a href="./index.html">
<img class="logo-dark" src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center" data-sm-skip="true">
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper d-flex flex-row align-items-center w-100">
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header mx-lg-auto order-0 order-lg-1 d-lg-flex px-lg-15">
<img class="logo-dark" src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" />
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close d-md-none" aria-label="Close"></button>
</div>
<div class="w-100 order-1 order-lg-0 d-lg-flex">
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="w-100 order-3 order-lg-2 d-lg-flex">
<ul class="navbar-nav me-lg-auto">
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar-center-logo.html', {
"logoBoth": true,
"classList": "center-logo transparent navbar-dark"
})Center Logo - Light Background
<nav class="navbar navbar-expand-lg center-logo navbar-light navbar-bg-light">
<div class="container justify-content-between align-items-center">
<div class="d-flex flex-row w-100 justify-content-between align-items-center d-lg-none">
<div class="navbar-brand"><a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center" data-sm-skip="true">
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper d-flex flex-row align-items-center w-100">
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header mx-lg-auto order-0 order-lg-1 d-lg-flex px-lg-15">
<a href="./index.html" class="d-none d-lg-flex"><img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<a href="./index.html" class="d-lg-none"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close d-md-none" aria-label="Close"></button>
</div>
<div class="w-100 order-1 order-lg-0 d-lg-flex">
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="w-100 order-3 order-lg-2 d-lg-flex">
<ul class="navbar-nav me-lg-auto">
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar-center-logo.html', {
"classList": "center-logo navbar-light navbar-bg-light"
})Center Logo - Dark Background
<nav class="navbar navbar-expand-lg center-logo navbar-dark navbar-bg-dark">
<div class="container justify-content-between align-items-center">
<div class="d-flex flex-row w-100 justify-content-between align-items-center d-lg-none">
<div class="navbar-brand"><a href="./index.html">
<img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center" data-sm-skip="true">
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper d-flex flex-row align-items-center w-100">
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header mx-lg-auto order-0 order-lg-1 d-lg-flex px-lg-15">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close d-md-none" aria-label="Close"></button>
</div>
<div class="w-100 order-1 order-lg-0 d-lg-flex">
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="w-100 order-3 order-lg-2 d-lg-flex">
<ul class="navbar-nav me-lg-auto">
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar-center-logo.html', {
"classList": "center-logo navbar-dark navbar-bg-dark",
"logoLight": true
})Center Logo - Fancy
<nav class="navbar navbar-expand-lg fancy center-logo navbar-light navbar-bg-light">
<div class="container">
<div class="navbar-collapse-wrapper bg-white d-lg-flex flex-row flex-nowrap w-100 justify-content-between align-items-center">
<div class="d-flex flex-row w-100 justify-content-between align-items-center d-lg-none">
<div class="navbar-brand"><a href="./index.html">
<img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" />
</a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center" data-sm-skip="true">
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-inner d-flex flex-row align-items-center w-100 mt-0">
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header mx-lg-auto order-0 order-lg-1 d-lg-flex px-lg-15">
<a href="./index.html" class="d-none d-lg-flex"><img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<a href="./index.html" class="d-lg-none"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close d-md-none" aria-label="Close"></button>
</div>
<div class="w-100 order-1 order-lg-0 d-lg-flex">
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<div class="w-100 order-3 order-lg-2 d-lg-flex">
<ul class="navbar-nav me-lg-auto">
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->@@include('_navbar-center-logo.html', {
"classList": "fancy center-logo navbar-light navbar-bg-light",
"fancy": true
}) Extended
Check out some of the live examples: Demo 12.
Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.
Learn More
Follow Us
<nav class="navbar navbar-expand-lg extended navbar-light navbar-bg-light">
<div class="container flex-lg-column">
<div class="topbar d-flex flex-row w-100 justify-content-between align-items-center">
<div class="navbar-brand"><a href="./index.html"><img src="./assets/img/logo.png" srcset="./assets/img/[email protected] 2x" alt="" /></a></div>
<div class="navbar-other ms-auto">
<ul class="navbar-nav flex-row align-items-center" data-sm-skip="true">
<li class="nav-item"><a class="nav-link" data-toggle="offcanvas-info"><i class="uil uil-info-circle"></i></a></li>
<li class="nav-item dropdown language-select text-uppercase">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Es</a></li>
</ul>
</li>
<li class="nav-item d-lg-none">
<div class="navbar-hamburger"><button class="hamburger animate plain" data-toggle="offcanvas-nav"><span></span></button></div>
</li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.d-flex -->
<div class="navbar-collapse-wrapper bg-white d-flex flex-row align-items-center">
<div class="navbar-collapse offcanvas-nav">
<div class="offcanvas-header d-lg-none d-xl-none">
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-nav-close" aria-label="Close"></button>
</div>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="dropdown"><a class="dropdown-item dropdown-toggle" href="#">Dropdown</a>
<ul class="dropdown-menu">
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Action</a></li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="dropdown-item" href="#">Another Action</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#">Mega Menu</a>
<ul class="dropdown-menu mega-menu">
<li class="mega-menu-content">
<div class="row gx-0 gx-lg-3">
<div class="col-lg-6">
<h6 class="dropdown-header">One</h6>
<div class="row gx-0">
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-6">
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Two</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
<div class="col-lg-3">
<h6 class="dropdown-header">Three</h6>
<ul class="list-unstyled">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Link</a></li>
</ul>
</div>
<!--/column -->
</div>
<!--/.row -->
</li>
<!--/.mega-menu-content-->
</ul>
<!--/.dropdown-menu -->
</li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
<!-- /.navbar-nav -->
</div>
<!-- /.navbar-collapse -->
<div class="navbar-other ms-auto w-100 d-none d-lg-block">
<nav class="nav social social-muted justify-content-end text-end">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.navbar-other -->
</div>
<!-- /.navbar-collapse-wrapper -->
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
<div class="offcanvas-info text-inverse">
<button type="button" class="btn-close btn-close-white offcanvas-close offcanvas-info-close" aria-label="Close"></button>
<a href="./index.html"><img src="./assets/img/logo-light.png" srcset="./assets/img/[email protected] 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Sandbox is a multipurpose HTML5 template with various layouts which will be a great solution for your business.</p>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Contact Info</h4>
<address> Moonshine St. 14/05 <br /> Light City, London </address>
<a href="mailto:[email protected]">[email protected]</a><br /> +00 (123) 456 78 90
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Learn More</h4>
<ul class="list-unstyled">
<li><a href="#">Our Story</a></li>
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- /.widget -->
<div class="widget">
<h4 class="widget-title text-white mb-3">Follow Us</h4>
<nav class="nav social social-white">
<a href="#"><i class="uil uil-twitter"></i></a>
<a href="#"><i class="uil uil-facebook-f"></i></a>
<a href="#"><i class="uil uil-dribbble"></i></a>
<a href="#"><i class="uil uil-instagram"></i></a>
<a href="#"><i class="uil uil-youtube"></i></a>
</nav>
<!-- /.social -->
</div>
<!-- /.widget -->
</div>
<!-- /.offcanvas-info -->@@include('_navbar-extended.html', {
"classList": "extended navbar-light navbar-bg-light"
})