Copy any custom block snippet below and paste it on your page to build your website easily.
<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/logo-dark@2x.png 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/logo-light@2x.png 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"
})
<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/logo@2x.png 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 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/logo-light@2x.png 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"
})
<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/logo@2x.png 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/logo-light@2x.png 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"
})
<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/logo-light@2x.png 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/logo-light@2x.png 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"
})
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/logo@2x.png 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/logo-light@2x.png 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/logo@2x.png 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/logo-light@2x.png 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/logo-light@2x.png 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Fhenix Africa 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> 27b Grace bill Road <br /> Eket, Akwa Ibom State </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> +234 706 996 8976
</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 Fhenix Africa</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
})
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/logo@2x.png 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 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/logo-light@2x.png 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/logo-light@2x.png 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Fhenix Africa 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> 27b Grace bill Road <br /> Eket, Akwa Ibom State </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> +234 706 996 8976
</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 Fhenix Africa</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
})
<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/logo@2x.png 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/logo-light@2x.png 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/logo-light@2x.png 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Fhenix Africa 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> 27b Grace bill Road <br /> Eket, Akwa Ibom State </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> +234 706 996 8976
</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 Fhenix Africa</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
})
<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/logo-light@2x.png 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/logo-light@2x.png 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/logo-light@2x.png 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Fhenix Africa 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> 27b Grace bill Road <br /> Eket, Akwa Ibom State </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> +234 706 996 8976
</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 Fhenix Africa</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
})
<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/logo@2x.png 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/logo-light@2x.png 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/logo-light@2x.png 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Fhenix Africa 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> 27b Grace bill Road <br /> Eket, Akwa Ibom State </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> +234 706 996 8976
</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 Fhenix Africa</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
})
<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/logo@2x.png 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/logo@2x.png 2x" alt="" /></a>
<a href="./index.html" class="d-lg-none"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 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"
})
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/logo@2x.png 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 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/logo@2x.png 2x" alt="" />
<img class="logo-light" src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 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"
})
<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/logo@2x.png 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/logo@2x.png 2x" alt="" /></a>
<a href="./index.html" class="d-lg-none"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 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"
})
<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/logo-light@2x.png 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/logo-light@2x.png 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
})
<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/logo@2x.png 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/logo@2x.png 2x" alt="" /></a>
<a href="./index.html" class="d-lg-none"><img src="./assets/img/logo-light.png" srcset="./assets/img/logo-light@2x.png 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
})
Check out some of the live examples: Demo 12.
<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/logo@2x.png 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/logo-light@2x.png 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/logo-light@2x.png 2x" alt="" /></a>
<div class="mt-4 widget">
<p>Fhenix Africa 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> 27b Grace bill Road <br /> Eket, Akwa Ibom State </address>
<a href="mailto:first.last@email.com">info@email.com</a><br /> +234 706 996 8976
</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"
})
Everything you need to create your next unique and professional website, including impressive and ready-made blocks and pages.
Buy Fhenix Africa