Ul/div not getting height

Question

I am having trouble getting my navbar to show up when I press my "menu button". The div seems to show up in the code, however, with a height of 0 . Here's the relevant code to the problem. Do you have any suggestions in how I go about fixing 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">Forside</a></li> <li><a href="#">Advokater</a></li> <li><a href="#">Sagsområder</a></li> <li><a href="#">Internationalt</a></li> <li><a href="#">Oplysninger</a></li> <li><a href="#">Karriere</a></li> <li><a href="#">Historie</a></li> <li><a href="#">Kontakt</a></li> </ul> </div> </nav> </header> 

Answer 1

  var onOff = 0; window.dropdown = function() { "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; display: 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; } header .navHide{ display: none; } header .navShow{ display: block !important; height:auto; } @media screen and (max-width: 1005px) { #ulDiv{ height: auto; } #nav_ul{ 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="window.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">Forside</a></li> <li><a href="#">Advokater</a></li> <li><a href="#">Sagsområder</a></li> <li><a href="#">Internationalt</a></li> <li><a href="#">Oplysninger</a></li> <li><a href="#">Karriere</a></li> <li><a href="#">Historie</a></li> <li><a href="#">Kontakt</a></li> </ul> </div> </nav> </header> <script> </script>