I need assistance with a navigation setup where the nav (located inside the header) needs to be connected to the bottom of a div named .menu_bar. The desired behavior is for the nav to slide down from directly underneath the .menu_bar when toggled, but currently, I am facing issues making this work consistently across different screen sizes.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="submenu" >
<a href="#">Nielsen Products<span class="icon-arrow-down2"></span><span class="caret"></span></a>
<ul class="children">
<li><a href="#">Exterior Cleaning<span class="icon-dot-single"></span></a></li>
<li><a href="#">Interior Cleaning<span class="icon-dot-single"></span></a></li>
<li><a href="#">Odour Control & Air Fresheners<span class="icon-dot-single"></span></a></li>
<li><a href="#">Exterior Finishes<span class="icon-dot-single"></span></a></li>
<li><a href="#">Dressings<span class="icon-dot-single"></span></a></li>
<li><a href="#">Glass Cleaning<span class="icon-dot-single"></span></a></li>
<li><a href="#">Workshop Maintenance<span class="icon-dot-single"></span></a></li>
<li><a href="#">Janitorial<span class="icon-dot-single"></span></a></li>
<li><a href="#">TDS & SDS INFO<span class="icon-dot-single"></span></a></li>
</ul>
</li>
<li><a href="#">Nielsen Catalogue</a></li>
<li class="submenu1">
<a href="#">Equipment/Tools/Consumables<span class="icon-arrow-down2"></span><span class="caret"></span></a>
<ul class="children1">
<li><a href="#">Valeting, Brushes and Equipment<span class="icon-dot-single"></span></a></li>
<li><a href="#">Tools & Equipment<span class="icon-dot-single"></span></a></li>
<li><a href="#">Workshop Consumables<span class="icon-dot-single"></span></a></li>
<li><a href="#">AdBlue<span class="icon-dot-single"></span></a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
</nav>
</header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-menu"></span>Menu</a>
</div>
For clarification, the bottom div mentioned isn't nested within any element except for the body tags.
.bt-menu {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu_bar {
display: block;
width: 100%;
height: 10%;
padding-top: 35px;
position: relative;
background: #FF0000;
z-index: 999;
font-size: 15px;
margin: 0;
}
.menu_bar .bt-menu {
display: block;
color: #FFF;
padding-left: 25px;
padding-right: 25px;
overflow: hidden;
font-size: 25px;
font-weight: bold;
text-decoration: none;
}
.menu_bar span {
float: right;
font-size: 20px;
}
header nav {
width: 80%;
height: 100%;
top: 0;
position: fixed;
margin: 0;
overflow-y: scroll;
z-index:9999;
}