In my website publishing class, I am working on designing a responsive template. Leveraging my knowledge of jquery, I decided to switch the horizontal navigation menu on the desktop version to a vertical menu on mobile devices. Instead of displaying all navigation list items which break at a certain width, I want the menu to appear only when clicking on the "Navigation" text. I have successfully hidden the menu on mobile until clicking on the nav text. However, the issue I'm facing is that when the menu appears, it expands the height of the nav element which is its parent. How can I modify the code so that the height of the nav element remains unchanged and the list appears outside of the nav element directly below the Navigation text?
Check out this screenshot for reference: https://i.sstatic.net/jXKQU.jpg
CSS:
#navTrigger {
display: none;
}
nav {
margin-bottom: 10px;
margin-left: 0px;
background: url(../images/wood_dark.png);
-webkit-box-shadow: 10px 2px 10px;
box-shadow: 0px -5px 5px 0px rgba(0, 0, 0, 1), inset 0px 5px 10px 0px rgba(255, 255, 255, .3);
border: 1px solid #555;
border-bottom-color: #888;
position: absolute;
z-index: 0;
width: 960px;
}
nav ul {
list-style-type: none;
margin-top: 0;
margin-right: 35px;
margin-left: 73px;
margin-bottom: 0;
}
nav ul li {
float: left;
display: inline;
border-right: 1px solid #888888;
border-left: 1px solid #444444;
margin: 0;
padding: 0;
}
nav ul li a {
color: #FFFFFF;
text-decoration: none;
font-size: 1.25em;
padding: 10px 15px;
display: block;
}
@media only screen and (max-width:790px){
#navTrigger {
display: block;
color: #fff;
margin-left: 124px;
padding: 10px 15px;
font-size: 1.25em;
}
nav ul {
display: none;
}
nav ul li {
display: block;
border-top: 1px solid rgba(255, 255, 255, .2);
float: none;
}
}
HTML:
<nav>
<span id="navTrigger">Navigation</span>
<ul>
<li><a href="index.html" title="Home Page">Home</a></li>
<li><a href="products.html" title="Our Products">Products</a></li>
<li><a href="services.html" title="Our Services">Services</a></li>
<li><a href="about.html" title="About Us">About</a></li>
<li><a href="support.html" title="Help and Support">Support</a></li>
<li><a href="contact.html" title="Contact Us">Contact</a></li>
</ul>
</nav>