Responsive Navbar
header class => .nav-light
header class => .nav-dark
Possibility to add header class => .nav-fixed
Code HTML
<header class="header-nav nav-light">
<div class="container d-flex align-center justify-between">
<a href="#" class="logo">
<i class="icon-chef"></i>
<span>Recipes</span>
</a>
<div class="menu-btn">
<i class="icon-hamburger"></i>
</div>
<nav>
<div class="w-100 menu-items">
<ul class="ml-auto">
<li><a href="#" class="menu-item">Home</a></li>
<li class="dropdown">
<a href="#" class="menu-item expand-btn">Dropdown Menu</a>
<ul class="dropdown-menu expandable">
<li><a href="#" class="menu-item">Item 1</a></li>
<li><a href="#" class="menu-item">Item 2</a></li>
<li class="dropdown-right">
<a href="#" class="menu-item expand-btn">
Item 3
<i class="icon-caret-right"></i>
</a>
<ul class="menu-right expandable">
<li><a href="#" class="menu-item">Item 3.1</a></li>
<li><a href="#" class="menu-item">Item 3.2</a></li>
<li><a href="#" class="menu-item">Item 3.3</a></li>
</ul>
</li>
<li><a href="#" class="menu-item">Item 4</a></li>
</ul>
</li>
<li>
<a href="#" class="menu-item expand-btn">Mega Menu</a>
<div class="mega-menu expandable">
<div class="content">
<div class="col">
<section>
<h2>Featured 1</h2>
<a href="#" class="img-wrapper">
<span class="img"><img src="https://picsum.photos/400?random=1" alt="Random image"></span>
</a>
<p>Lorem ipsum dolor sit amet.</p>
</section>
</div>
<div class="col">
<section>
<h2>Featured 2</h2>
<ul class="mega-links">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</section>
</div>
<div class="col">
<section>
<h2>Featured 3</h2>
<ul class="mega-links">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</section>
</div>
<div class="col">
<section>
<h2>Featured 4</h2>
<ul class="mega-links">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</section>
</div>
</div>
</div>
</li>
<li>
<a href="#" class="menu-item expand-btn">Blog</a>
<div class="mega-menu blog expandable">
<div class="content">
<div class="col">
<a href="#" class="img-wrapper">
<span class="img"><img src="https://picsum.photos/400?random=2" alt="Random image"></span>
</a>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ducimus earum culpa
suscipit? Consequatur sint distinctio, iusto quia provident quaerat.</p>
<div>
<a href="#" class="btn btn-primary">Read more</a>
</div>
</div>
<div class="col">
<a href="#" class="img-wrapper">
<span class="img"><img src="https://picsum.photos/400?random=3" alt="Random image"></span>
</a>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ducimus earum culpa
suscipit? Consequatur sint distinctio, iusto quia provident quaerat.</p>
<div>
<a href="#" class="btn btn-primary">Read more</a>
</div>
</div>
<div class="col">
<a href="#" class="img-wrapper">
<span class="img"><img src="https://picsum.photos/400?random=4" alt="Random image"></span>
</a>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ducimus earum culpa
suscipit? Consequatur sint distinctio, iusto quia provident quaerat.</p>
<div>
<a href="#" class="btn btn-primary">Read more</a>
</div>
</div>
</div>
</div>
</li>
<li><a href="#" class="menu-item">About</a></li>
</ul>
</div>
</nav>
</div>
</header>