HTML example:
<!-- Mainmenu-Area-Start -->
<div class="mainmenu-area" data-spy="affix" data-offset-top="50">
<div class="container">
<div class="navbar-row">
<!-- Site-Logo-Start -->
<div class="site-branding">
<a href="#"><img src="images/logo.png" alt=""></a>
</div>
<!-- Site-Logo-End -->
<!-- Primary-Menu-Start -->
<nav class="primary-menu" id="mainmenu">
<ul class="nav">
<li class="active"><a href="#home-page">Home</a>
<ul class="sub-menu">
<li><a href="index.html">Normal Version</a></li>
<li><a href="index-2.html">Slider Version</a></li>
<li><a href="index-3.html">Particle Version</a></li>
<li><a href="index-4.html">Video Version</a></li>
</ul>
</li>
<li><a href="#about-page">About</a></li>
<li><a href="#portfolio-page">Portfolio</a>
<ul class="sub-menu">
<li><a href="portfolio-2.html">Portfolio Grid 2</a></li>
<li><a href="portfolio-3.html">Portfolio Grid 3</a></li>
<li><a href="portfolio-details.html">Portfolio Details</a></li>
</ul>
</li>
<li><a href="#skills-page">Skills</a></li>
<li><a href="#blog-page">Blog</a>
<ul class="sub-menu">
<li><a href="blog-1.html">Blog Full Width</a></li>
<li><a href="blog-3.html">Blog Grid Post</a></li>
<li><a href="blog-details.html">Blog Details</a></li>
</ul>
</li>
<li><a href="#contact-page">Contact</a></li>
</ul>
</nav>
<!-- Primary-Menu-End -->
<div class="menu-right">
<div class="social-buttons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
<!-- Mobile-Menu-Tigger-Button -->
<div class="toggle-menu">
<button type="button" class="navi-trigger" >
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Mainmenu-Area-End -->