Header 3
Navbar fixed with mega menu
and sidebar mobile menu
<!-- ========== { HEADER }========== -->
<header>
<!-- Navbar -->
<nav class="main-nav navbar navbar-expand-lg hover-navbar fixed-top navbar-light bg-white">
<div class="container">
<a class="navbar-brand main-logo" href="#">
<span class="h2 text-body fw-bold mt-2">Up<span class="text-primary">gency</span></span>
<!-- <img class="logo-dark" src="src/img-min/logo/logo.png" alt="Logo dark"> -->
</a>
<!-- navbar button -->
<button class="navbar-toggler sidebar-menu-trigger" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<!-- collapse menu -->
<div class="collapse navbar-collapse" id="navbarTogglerDemo">
<ul class="navbar-nav mx-auto mt-2 mt-lg-0">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbarDropdown1">
Home
</a>
<div class="dropdown-menu dropdown-md dropdown-menu-lg-center py-0" aria-labelledby="navbarDropdown1">
<div class="row g-0">
<div class="col-12 col-md-6">
<div class="dropdown-md-area">
<p class="dropdown-md-title"></p>
<a class="dropdown-item d-flex" href="#">
<div class="drop-icon bg-primary text-light rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-megaphone" viewBox="0 0 16 16">
<path d="M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-.214c-2.162-1.241-4.49-1.843-6.912-2.083l.405 2.712A1 1 0 0 1 5.51 15.1h-.548a1 1 0 0 1-.916-.599l-1.85-3.49a68.14 68.14 0 0 0-.202-.003A2.014 2.014 0 0 1 0 9V7a2.02 2.02 0 0 1 1.992-2.013 74.663 74.663 0 0 0 2.483-.075c3.043-.154 6.148-.849 8.525-2.199V2.5zm1 0v11a.5.5 0 0 0 1 0v-11a.5.5 0 0 0-1 0zm-1 1.35c-2.344 1.205-5.209 1.842-8 2.033v4.233c.18.01.359.022.537.036 2.568.189 5.093.744 7.463 1.993V3.85zm-9 6.215v-4.13a95.09 95.09 0 0 1-1.992.052A1.02 1.02 0 0 0 1 7v2c0 .55.448 1.002 1.006 1.009A60.49 60.49 0 0 1 4 10.065zm-.657.975l1.609 3.037.01.024h.548l-.002-.014-.443-2.966a68.019 68.019 0 0 0-1.722-.082z"/>
</svg>
</div>
<div class="drop-text">
<p class="fw-medium">Advertising</p>
</div>
</a>
<a class="dropdown-item d-flex" href="#">
<div class="drop-icon bg-primary text-light rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-briefcase" viewBox="0 0 16 16">
<path d="M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v8A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-8A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zm1.886 6.914L15 7.151V12.5a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5V7.15l6.614 1.764a1.5 1.5 0 0 0 .772 0zM1.5 4h13a.5.5 0 0 1 .5.5v1.616L8.129 7.948a.5.5 0 0 1-.258 0L1 6.116V4.5a.5.5 0 0 1 .5-.5z"/>
</svg>
</div>
<div class="drop-text">
<p class="fw-medium">Branding</p>
</div>
</a>
<a class="dropdown-item d-flex" href="#">
<div class="drop-icon bg-primary text-light rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lightbulb" viewBox="0 0 16 16">
<path d="M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a1.964 1.964 0 0 0-.453-.618A5.984 5.984 0 0 1 2 6zm6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1z"/>
</svg>
</div>
<div class="drop-text">
<p class="fw-medium">Creative</p>
</div>
</a>
<a class="dropdown-item d-flex" href="#">
<div class="drop-icon bg-primary text-light rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-laptop" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M13.5 3h-11a.5.5 0 0 0-.5.5V11h12V3.5a.5.5 0 0 0-.5-.5zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11z"/>
<path d="M0 12h16v.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5V12z"/>
</svg>
</div>
<div class="drop-text">
<p class="fw-medium">Digital</p>
</div>
</a>
<a class="dropdown-item d-flex" href="#">
<div class="drop-icon bg-primary text-light rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"/>
</svg>
</div>
<div class="drop-text">
<p class="fw-medium">Graphic</p>
</div>
</a>
</div>
</div>
<div class="col-12 col-md-6 bg-light">
<div class="dropdown-md-area">
<p class="dropdown-md-title"></p>
<a class="dropdown-item d-flex" href="#">
<div class="drop-icon bg-primary text-light rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
<path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"/>
</svg>
</div>
<div class="drop-text">
<p class="fw-medium">Marketing</p>
</div>
</a>
<a class="dropdown-item d-flex" href="#">
<div class="drop-icon bg-primary text-light rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-app-indicator" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M5.5 2A3.5 3.5 0 0 0 2 5.5v5A3.5 3.5 0 0 0 5.5 14h5a3.5 3.5 0 0 0 3.5-3.5V8a.5.5 0 0 1 1 0v2.5a4.5 4.5 0 0 1-4.5 4.5h-5A4.5 4.5 0 0 1 1 10.5v-5A4.5 4.5 0 0 1 5.5 1H8a.5.5 0 0 1 0 1H5.5z"/>
<path d="M16 3a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
</svg>
</div>
<div class="drop-text">
<p class="fw-medium">Mobile App</p>
</div>
</a>
<a class="dropdown-item d-flex" href="#">
<div class="drop-icon bg-primary text-light rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</div>
<div class="drop-text">
<p class="fw-medium">SEO</p>
</div>
</a>
<a class="dropdown-item d-flex" href="#">
<div class="drop-icon bg-primary text-light rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-share" viewBox="0 0 16 16">
<path d="M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5zm-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/>
</svg>
</div>
<div class="drop-text">
<p class="fw-medium">Social Media</p>
</div>
</a>
<a class="dropdown-item d-flex" href="#">
<div class="drop-icon bg-primary text-light rounded">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe2" viewBox="0 0 16 16">
<path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855-.143.268-.276.56-.395.872.705.157 1.472.257 2.282.287V1.077zM4.249 3.539c.142-.384.304-.744.481-1.078a6.7 6.7 0 0 1 .597-.933A7.01 7.01 0 0 0 3.051 3.05c.362.184.763.349 1.198.49zM3.509 7.5c.036-1.07.188-2.087.436-3.008a9.124 9.124 0 0 1-1.565-.667A6.964 6.964 0 0 0 1.018 7.5h2.49zm1.4-2.741a12.344 12.344 0 0 0-.4 2.741H7.5V5.091c-.91-.03-1.783-.145-2.591-.332zM8.5 5.09V7.5h2.99a12.342 12.342 0 0 0-.399-2.741c-.808.187-1.681.301-2.591.332zM4.51 8.5c.035.987.176 1.914.399 2.741A13.612 13.612 0 0 1 7.5 10.91V8.5H4.51zm3.99 0v2.409c.91.03 1.783.145 2.591.332.223-.827.364-1.754.4-2.741H8.5zm-3.282 3.696c.12.312.252.604.395.872.552 1.035 1.218 1.65 1.887 1.855V11.91c-.81.03-1.577.13-2.282.287zm.11 2.276a6.696 6.696 0 0 1-.598-.933 8.853 8.853 0 0 1-.481-1.079 8.38 8.38 0 0 0-1.198.49 7.01 7.01 0 0 0 2.276 1.522zm-1.383-2.964A13.36 13.36 0 0 1 3.508 8.5h-2.49a6.963 6.963 0 0 0 1.362 3.675c.47-.258.995-.482 1.565-.667zm6.728 2.964a7.009 7.009 0 0 0 2.275-1.521 8.376 8.376 0 0 0-1.197-.49 8.853 8.853 0 0 1-.481 1.078 6.688 6.688 0 0 1-.597.933zM8.5 11.909v3.014c.67-.204 1.335-.82 1.887-1.855.143-.268.276-.56.395-.872A12.63 12.63 0 0 0 8.5 11.91zm3.555-.401c.57.185 1.095.409 1.565.667A6.963 6.963 0 0 0 14.982 8.5h-2.49a13.36 13.36 0 0 1-.437 3.008zM14.982 7.5a6.963 6.963 0 0 0-1.362-3.675c-.47.258-.995.482-1.565.667.248.92.4 1.938.437 3.008h2.49zM11.27 2.461c.177.334.339.694.482 1.078a8.368 8.368 0 0 0 1.196-.49 7.01 7.01 0 0 0-2.275-1.52c.218.283.418.597.597.932zm-.488 1.343a7.765 7.765 0 0 0-.395-.872C9.835 1.897 9.17 1.282 8.5 1.077V4.09c.81-.03 1.577-.13 2.282-.287z"/>
</svg>
</div>
<div class="drop-text">
<p class="fw-medium">Web Design</p>
</div>
</a>
</div>
</div>
<div class="col-12 border-top text-center">
<div class="p-3 small">Pre-build landing pages for your professional Agency.</div>
</div>
</div>
</div>
</li>
<!--dropdown submenu-->
<li class="nav-item dropdown">
<a id="navbarhome" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pages</a>
<!--link-->
<ul class="dropdown-menu dropdown-menu-lg-center" aria-labelledby="navbarhome">
<!--submenu-->
<li class="dropdown-submenu">
<a id="sub2" class="dropdown-item dropdown-toggle" href="#">Pages</a>
<!--link-->
<ul class="submenu dropdown-menu" aria-labelledby="sub2">
<li class="dropdown-submenu">
<a id="sub350" class="dropdown-item dropdown-toggle" href="#">
Basic</a>
<!--child submenu-->
<ul class="submenu dropdown-menu" aria-labelledby="sub350">
<li><a class="dropdown-item" href="#">404</a></li>
<li><a class="dropdown-item" href="#">Classic</a></li>
<li><a class="dropdown-item" href="#">Coming Soon</a></li>
<li><a class="dropdown-item" href="#">FAQ</a></li>
<li><a class="dropdown-item" href="#">Term of Use</a></li>
</ul>
<!--End child submenu-->
</li>
<li><a class="dropdown-item" href="#">About</a></li>
<li><a class="dropdown-item" href="#">Career</a></li>
<li><a class="dropdown-item" href="#">Contact</a></li>
<li><a class="dropdown-item" href="#">Portfolio</a></li>
<li><a class="dropdown-item" href="#">Pricing</a></li>
<li><a class="dropdown-item" href="#">Services</a></li>
</ul>
</li>
<!--end submenu-->
<!--submenu-->
<li class="dropdown-submenu">
<a id="sub22" class="dropdown-item dropdown-toggle" href="#">Blogs</a>
<!--link-->
<ul class="submenu dropdown-menu" aria-labelledby="sub22">
<li><a class="dropdown-item" href="#">Blog</a></li>
<li><a class="dropdown-item" href="#">Search</a></li>
<li><a class="dropdown-item" href="#">Author</a></li>
<li><a class="dropdown-item" href="#">Single Article</a></li>
<li><a class="dropdown-item" href="#">Classic Article</a></li>
</ul>
</li>
<!--end submenu-->
<!--submenu-->
<li class="dropdown-submenu">
<a id="sub221" class="dropdown-item dropdown-toggle" href="#">Users</a>
<!--link-->
<ul class="submenu dropdown-menu" aria-labelledby="sub221">
<li><a class="dropdown-item" href="#">Login</a></li>
<li><a class="dropdown-item" href="#">Register</a></li>
<li><a class="dropdown-item" href="#">Recover</a></li>
</ul>
</li>
<!--end submenu-->
</ul>
<!-- end link -->
</li>
<!--mega menu-->
<li class="nav-item dropdown">
<a id="navbarmega3" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Sections</a>
<div class="dropdown-menu dropdown-lg dropdown-menu-lg-center overflow-hidden p-0" aria-labelledby="navbarmega3">
<div class="row g-0">
<div class="col-lg-4">
<!-- header banner -->
<div class="position-relative d-none d-lg-block header-banner z-index-1" style="background-image: url('../../src/img-min/bg/bg-business.jpg');">
<!-- background overlay -->
<div class="overlay bg-primary opacity-90 z-index-n1"></div>
<!-- banner content -->
<div class="header-banner-content">
<div class="mb-4 px-lg-4">
<h3 class="h4 text-light">Sections</h3>
<p class="text-light">Section for any project.</p>
</div>
<a class="btn btn-light btn-sm" href="#">
Explore
<svg class="bi bi-arrow-right" width="1.5rem" height="1.5rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.146 4.646a.5.5 0 01.708 0l3 3a.5.5 0 010 .708l-3 3a.5.5 0 01-.708-.708L12.793 8l-2.647-2.646a.5.5 0 010-.708z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M2 8a.5.5 0 01.5-.5H13a.5.5 0 010 1H2.5A.5.5 0 012 8z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div><!-- end header banner -->
</div>
<div class="col-lg-8">
<div class="py-4 px-5">
<div class="row">
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-3 mb-lg-0">
<li><a class="dropdown-item px-0" href="#">Blog</a></li>
<li><a class="dropdown-item px-0" href="#">Brand</a></li>
<li><a class="dropdown-item px-0" href="#">Collage</a></li>
<li><a class="dropdown-item px-0" href="#">Contact</a></li>
<li><a class="dropdown-item px-0" href="#">Content</a></li>
<li><a class="dropdown-item px-0" href="#">Counter</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-3 mb-lg-0">
<li><a class="dropdown-item px-0" href="#">Cta</a></li>
<li><a class="dropdown-item px-0" href="#">Download</a></li>
<li><a class="dropdown-item px-0" href="#">Faq</a></li>
<li><a class="dropdown-item px-0" href="#">Feature</a></li>
<li><a class="dropdown-item px-0" href="#">Footer</a></li>
<li><a class="dropdown-item px-0" href="#">Header</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-3 mb-lg-0">
<li><a class="dropdown-item px-0" href="#">Hero</a></li>
<li><a class="dropdown-item px-0" href="#">Newsletter</a></li>
<li><a class="dropdown-item px-0" href="#">Portfolio</a></li>
<li><a class="dropdown-item px-0" href="#">Pricing</a></li>
<li><a class="dropdown-item px-0" href="#">Process</a></li>
<li><a class="dropdown-item px-0" href="#">Progress</a></li>
</ul>
</div>
<div class="col-sm-6 col-lg-3">
<ul class="list-unstyled mb-3 mb-lg-0">
<li><a class="dropdown-item px-0" href="#">Review</a></li>
<li><a class="dropdown-item px-0" href="#">Service</a></li>
<li><a class="dropdown-item px-0" href="#">Slider</a></li>
<li><a class="dropdown-item px-0" href="#">Team</a></li>
<li><a class="dropdown-item px-0" href="#">Video</a></li>
<li><a class="dropdown-item px-0" href="#">Other</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!--medium menu with svg icon-->
<li class="nav-item dropdown">
<a id="navbarmd" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-md dropdown-menu-lg-center p-4" aria-labelledby="navbarmd">
<div class="list-group list-group-flush">
<a class="list-group-item dropdown-item bg-tansparent d-flex align-item-center" href="#">
<!-- Icon -->
<div class="align-self-center text-primary">
<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 512 512'><path stroke="currentColor" d='M416,221.25V416a48,48,0,0,1-48,48H144a48,48,0,0,1-48-48V96a48,48,0,0,1,48-48h98.75a32,32,0,0,1,22.62,9.37L406.63,198.63A32,32,0,0,1,416,221.25Z' style='fill:none;stroke-linejoin:round;stroke-width:32px'/><path stroke="currentColor" d='M256,56V176a32,32,0,0,0,32,32H408' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='288' x2='336' y2='288' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='176' y1='368' x2='336' y2='368' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
</div>
<!-- Content -->
<div class="ms-4 align-self-center">
<h6 class="text-uppercase mb-1">
Documentation
</h6>
<p class="text-muted mb-0">
Development guides
</p>
</div>
</a>
<a class="list-group-item dropdown-item bg-tansparent d-flex align-item-center" href="#">
<!-- Icon -->
<div class="align-self-center text-primary">
<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 512 512'><rect stroke="currentColor" x='48' y='48' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect stroke="currentColor" x='288' y='48' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect stroke="currentColor" x='48' y='288' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><rect stroke="currentColor" x='288' y='288' width='176' height='176' rx='20' ry='20' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
</div>
<!-- Content -->
<div class="ms-4 align-self-center">
<h6 class="text-uppercase mb-1">
Components
</h6>
<p class="text-muted mb-0">
Full list of components
</p>
</div>
</a>
<a class="list-group-item dropdown-item bg-tansparent d-flex align-item-center" href="#">
<!-- Icon -->
<div class="align-self-center text-primary">
<svg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 512 512'><polyline stroke="currentColor" points='160 368 32 256 160 144' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><polyline stroke="currentColor" points='352 368 480 256 352 144' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/><line stroke="currentColor" x1='304' y1='96' x2='208' y2='416' style='fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px'/></svg>
</div>
<!-- Content -->
<div class="ms-4 align-self-center">
<h6 class="text-uppercase mb-1">
Changelog
</h6>
<p class="text-muted mb-0">
Keep track of changes
</p>
</div>
</a>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Icons</a>
</li>
</ul>
<div class="d-grid d-lg-block my-3 my-lg-0">
<a class="btn btn-primary btn-sm" target="_blank" rel="noopener" href="#">
<svg xmlns="http://www.w3.org/2000/svg" class="me-1" width="1.2rem" height="1.2rem" fill="currentColor" viewBox="0 0 512 512"><circle cx="176" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="400" cy="416" r="16" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="48 80 112 80 160 352 416 352" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M160,288H409.44a8,8,0,0,0,7.85-6.43l28.8-144a8,8,0,0,0-7.85-9.57H128" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg> Buy Now
</a>
</div>
</div><!-- end collapse menu -->
</div>
</nav><!-- End Navbar -->
</header><!-- end header -->
<!-- sidebar mobile menu -->
<div class="mobile-side">
<!--Left Mobile menu-->
<div id="back-menu" class="back-menu back-menu-end">
<span class="hamburger-icon open">
<svg class="bi bi-x" width="2rem" height="2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"></path>
</svg>
</span>
</div>
<nav id="mobile-menu" class="menu-mobile d-flex flex-column push push-end bg-white">
<!-- mobile menu content -->
<div class="mobile-content mb-auto">
<!--logo-->
<div class="logo-sidenav px-5 mb-4">
<a href="#" class="d-flex">
<!-- <span class="h2 text-body fw-bold mt-2 align-self-center">Up<span class="text-primary">gency</span></span> -->
<img src="src/img-min/logo/logo.png" class="img-fluid" alt="logo">
</a>
</div>
<!--navigation-->
<div class="sidenav-menu side-light">
<nav class="navbar navbar-inverse">
<ul id="side-menu" class="nav navbar-nav list-group list-unstyled side-link">
<li><a href="#" class="nav-link">Home</a></li>
<li><a href="#" class="nav-link">Features</a></li>
<li><a href="#" class="nav-link">Pricing</a></li>
<!-- dropdown menu start -->
<li class="mega-dropdown dropdown">
<a href="#" class="dropdown-toggle nav-link" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="menu-12">Dropdown</a>
<!-- dropdown content -->
<ul class="dropdown-menu side-drop">
<li><a href="#" class="dropdown-item">Dropdown item</a></li>
<li class="dropdown-submenu dropdownfirst">
<a href="#" class="dropdown-item dropdown-toggle" id="menu-13">Dropdown item</a>
<!-- dropdown submenu -->
<ul class="submenu dropdown-menu side-drop">
<li><a href="#" class="dropdown-item">Dropdown item</a></li>
</ul>
</li>
<li class="dropdown-submenu side-drop dropdownfirst">
<a href="#" class="dropdown-item dropdown-toggle" id="menu-14">Dropdown item</a>
<ul class="submenu dropdown-menu side-drop">
<li><a href="#" class="dropdown-item">Dropdown item</a></li>
<li><a href="#" class="dropdown-item">Dropdown item</a></li>
<li><a href="#" class="dropdown-item">Dropdown item</a></li>
</ul>
</li>
</ul>
</li><!-- end dropdown menu -->
<li><a href="#" class="nav-link">About</a></li>
<li><a href="#" class="nav-link">Contact</a></li>
</ul>
</nav>
</div>
</div>
<!-- copyright mobile sidebar menu -->
<div class="mobile-copyright mt-5 text-center">
<p class="text-muted">Copyright <a href="#">Upgency</a> - All right reserved</p>
</div>
</nav>
</div>
<!-- end sidebar mobile menu -->
Don't forget to add body-nav-fixed class in body