div的高度不会改变CSS

Question

I'm working on a animated navigation bar. Now I want to make the height of the div 0px, so that if I click on a button, the menu will pop-out. But the height stays the same if I change it to 0px:

I hope someone could help me.

HTML:

<div id="mobileMenu">
    <a href="#"> <h1> Home </h1> </a>
    <a href="#"> <h1> Blog </h1> </a>
    <a href="#"> <h1> Lorem ipsum </h1> </a>
    <a href="#"> <h1> Lorem ipsum </h1> </a>
    <a href="#"> <h1> Contact </h1> </a>
</div>

CSS:

#mobileMenu {
    position: fixed;
    height: 0px;
    z-index: 10;
    top: 0;
    margin-top: 50px;
    width: 100%;
}

#mobileMenu a {
    text-decoration: none;
    color: white;
}

#mobileMenu h1 {
    padding: 20px 0px;
    font-size: 15px;
    background-color: white;
    color: black;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-family: OpenSans-Regular;
    padding-left: 15%;
}

Answer 1

You need to set overflow: hidden; . The height is 0 but the content is overflowing, and overflow is visible by default.

 div { height: 0; overflow: hidden; } 

 <div id="mobileMenu"> <a href="#"> <h1> Home </h1> </a> <a href="#"> <h1> Blog </h1> </a> <a href="#"> <h1> Lorem ipsum </h1> </a> <a href="#"> <h1> Lorem ipsum </h1> </a> <a href="#"> <h1> Contact </h1> </a> </div> 

Answer 2

You can also use a CSS rule: set in #mobileMenu display:none and via JS change with display:block dynamically

 #mobileMenu { position: fixed; display: none; height: 0; z-index: 10; top: 0; margin-top: 50px; width: 100%; } #mobileMenu a { text-decoration: none; color: white; } #mobileMenu h1 { padding: 20px 0px; font-size: 15px; background-color: white; color: black; border-bottom: 1px solid rgba(0, 0, 0, 0.05); font-family: OpenSans-Regular; padding-left: 15%; } 

 <div id="mobileMenu"> <a href="#"> <h1> Home </h1> </a> <a href="#"> <h1> Blog </h1> </a> <a href="#"> <h1> Lorem ipsum </h1> </a> <a href="#"> <h1> Lorem ipsum </h1> </a> <a href="#"> <h1> Contact </h1> </a> </div>