I'm struggling to make my navbar appear when I click the "menu button". The div seems to be present in the code, but with a height of 0. Here's the relevant section of the code causing the issue. Any suggestions on how I can resolve this?
var onOff = 0;
function dropdown() {
"use strict";
var navbar = document.getElementById("nav_ul");
var ulDiv = document.getElementById("ulDiv");
if (onOff === 0) {
navbar.setAttribute("class", "navShow");
ulDiv.setAttribute("class", "navShow");
onOff = 1;
} else if (onOff === 1) {
navbar.setAttribute("class", "navHide");
ulDiv.setAttribute("class", "navHide");
onOff = 0;
}
}#ulDiv{
text-align: center;
float: none;
}
ul{
position: relative;
bottom: 0;
margin-left: auto;
margin-right: auto;
padding-bottom: 20px;
}
li {
display: inline;
padding-top: 0;
margin-top: 0;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 5px;
}
.navHide{
display: none;
}
.navShow{
display: block;
height:auto;
}
@media screen and (max-width: 1005px) {
#ulDiv{
height: auto;
}
#nav_ul{
display: none;
width: 100px;
z-index: 3;
position: absolute;
top: 106px;
left: 0px;
margin: 0px;
padding-bottom: 20px;
}
li{
display: inline-block;
}
}<header>
<nav id="navbar" class="navbar">
<a href="home.html" id="logoA"><img id="logo" alt="logo" src="logo_dk.jpg"></a>
<button id="menu-but" onclick="dropdown()"><img id="meny-icon" alt="meny icon" src="menu-icon.png"></button>
<div id="ulDiv"><ul id="nav_ul" class="none">
<li><a href="home.html">Home</a></li>
<li><a href="#">Lawyers</a></li>
<li><a href="#">Practice Areas</a></li>
<li><a href="#">International</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>