<header class="header">
<div class="container">
<section class="wrapper">
<h1><a href="#" class="brand">Brand</a></h1>
<button type="button" class="opened-menu">
<span></span>
<span></span>
<span></span>
<span></span>
</button>
<div class="overlay"></div>
<nav class="navbar">
<button type="button" class="closed-menu">
<img src="./asset/closed.svg" class="closed-icon" alt="closed">
</button>
<ul class="menu">
<li class="menu-item"><a href="#">Home</a></li>
<li class="menu-item"><a href="#">About</a></li>
<li class="menu-item menu-item-has-children">
<a href="#" data-toggle="sub-menu">Services<i class="expand"></i></a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Web Design</a></li>
<li class="menu-item"><a href="#">Web Development</a></li>
<li class="menu-item"><a href="#">Brand Marketing</a></li>
<li class="menu-item"><a href="#">SEO and Optimizing</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" data-toggle="sub-menu">Planning <i class="expand"></i></a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Basic Plan</a></li>
<li class="menu-item"><a href="#">Standard Plan</a></li>
<li class="menu-item"><a href="#">Premium Plan</a></li>
<li class="menu-item"><a href="#">Professional Plan</a></li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="#" data-toggle="sub-menu">Article <i class="expand"></i></a>
<ul class="sub-menu">
<li class="menu-item"><a href="#">Article One</a></li>
<li class="menu-item"><a href="#">Article Two</a></li>
<li class="menu-item"><a href="#">Article Three</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Contact</a></li>
</ul>
</nav>
</section>
</div>
</header>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter