I need help attached a sidebar menu on to the the top menu. I have attached a image of what it looks like with the sidebar menu detached from the top menu. I want to move it up to the top menu as a hamburger menu. I shortened the side menu html because there is too many menu items so they won't much the image you see.
This is an image of what the page currently looks like
I definitely would appreciate any suggestions and help on this please.
HTML:
<body class="loggedin">
<div class="site-wrapper">
<!-- HEADER -->
<header id="header">
<nav class="navbar navbar-expand-lg mb-2">
<a href='/' class="navbar-brand">
<img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
</a>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select SFA</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 1</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 2</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 3</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select Program Year</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 1</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 2</a>
</li>
<li class="dropdown-menu-item">
<a href="#">Dropdown Item 3</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="Div1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link" title="Settings"><i class="fas fa-search"></i></a>
</li>
<li class="nav-item rounded-icon">
<a href="#" class="nav-link" title="Settings"><i class="fas fa-user"></i><b class="caret"></b></a>
</li>
</ul>
</div>
</nav>
<div id="appSideBar" class="hidden">
<div class="appSideLinks">
<nav aria-label="programs">
<ul class="programsSide">
<li class="program-item">
<i class="fas fa-apple-alt"></i> School Nutrition Programs
</li>
<li class="program-item">
<i class="fas fa-dollar-sign"></i> Accounting
</li>
<li class="program-item">
<i class="fas fa-child"></i> Child and Adult Care Food Program
</li>
<li class="program-item">
<i class="fas fa-cogs"></i> Maintenance and Configuration
</li>
<li class="program-item">
<i class="fas fa-temperature-hot"></i> Summer Food Service Program
</li>
<li class="program-item">
<i class="fas fa-shield-check"></i> Security
</li>
<li class="program-item">
<i class="fas fa-truck"></i> Food Distribution Program
</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- SPONSOR INFO SECTION -->
<main role="main" id="main">
<div id="wrapper">
<!-- SIDEBAR -->
<div id="sidebar-wrapper" class="sb-wrapper">
<a href="#menu-toggle" class="sidebtn-holder" id="menu-toggle">
<i class="fas fa-chevron-circle-left"></i>
</a>
<div class="list-wrapper">
<div class="nav-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#" v-b-tooltip.hover.right title="Entity Manager">
<div> Entity Manager</div>
</a>
</li>
<li>
<a href="/#/AZSiteApps" v-b-tooltip.hover.right title="Area Eligibility">
<div> Area Eligibility
</div>
</a>
</li>
<li>
<a href="/#/AZFFVP" v-b-tooltip.hover.right title="Site Applications">
<div> Site Applications</div>
</a>
</li>
<li>
<a href="/#/AZProviderList" v-b-tooltip.hover.right title="Provider & Vendor List">
<div> Providers & Vendors</div>
</a>
</li>
<li>
<a href="/#/AZDocLibrary" v-b-tooltip.hover.right title="Provisions">
<div> Provisions</div><span class="material-icons">chevron_right</span>
</a>
<ul>
<li><a href="#">Stream 1</a></li>
<li><a href="#">Stream 2</a></li>
</ul>
</li>
</ul>
</div>
<div class="nav-wrapper">
</div>
</div>
</div>
<!-- CONTENT -->
<div class="container-fluid">
<div class="row">
<div class="col">
<div id="midcol-nslp" class="p-3">
]]>.Value
Dim sContentBottomHtml As String = _
<![CDATA[
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</main>
</body>
</html>
This is an image of what the page currently looks like
I definitely would appreciate any suggestions and help on this please.