content of website is in way of menu in mobile format

Question

I'm working on a simple responsive menu in HTML AND CSS, everything seems to work so far however I have some issue with it in mobile format. Basically when the menu opens up, the text that's below it is in its way and am unable to see the menu items.

html, body{
    width:100%;
    height:100%;
    margin:0;
}
html {
    font-family:"helvetica neue", sans-serif;
}
.nav{
    border-bottom: 1px solid #eaeaeb;
    text-align:right;
    height:50px;
    line-height:50px;
}
.menu{
    margin:0 30px 0 0;
}
.menu a{
    clear:right;
    text-decoration:none;
    color:gray;
    margin: 0 10px;
    line-height: 50px;
}
span{
    color:#54D17A;
}
label{
    margin:0 40px 0 0;
    font-size:26px;
    line-height: 50px;
    display: none;
    width:26px;
    float:right;
}
#toggle{
    display:none;
}

/*Media*/
@media only screen and (max-width:500px){
    label{
        display:block;
        cursor: pointer;
    }
    .menu{
        text-align: center;
        width:100%;
        display:none;
    }
    .menu a{
        display: block;
        border-bottom: 1px solid #eaeaeb;
        margin:0;
        line-height: 50px;
    }
    #toggle:checked + .menu{
        display:block;
    }
    #menu a:clicked + .menu {
        display:none;
    }

}

<div class="nav">
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle"/>
        <div class="menu">
            <a href = "#">Business</a>
            <a href = "Services.html">Services</a>
            <a href = "#">Learn more</a>
            <a href = "#"><span>Free Trial</span></a>
        </div>
    </div>
    <div class="stuff">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus similique voluptatum quas sit accusantium molestiae, cupiditate magnam soluta, ab inventore possimus placeat ipsum eum perspiciatis ipsam nobis nulla tenetur assumenda.
    </div>

As you can see when in mobile mode, and you open the menu, the text on the site is in the way and user is unable to see the menu selections.

is there a way to push down the content below the menu so that menu is visible? Or an alternative solution so that the menu is clearly visible to the user as well as the toggle icon.

Answer 1

@media only screen and (max-width: 500px){
    .nav{
        position: relative;
    }

    #toggle:checked + .menu {
        display: block;
        position: absolute;
        top: 51px;
        z-index: 100;
        background: #fff;
    }
}

Answer 2

There are two steps to fix this, assuming you want the nav to drop down in front of the content: the nav needs a background color, and it needs a higher z-index than the main content, so that the menu renders in front and the content sits behind it.

.menu {
    margin:0 30px 0 0;

    /* position the menu in front of the content */
    position: relative;
    z-index: 2;

    /* and make sure the content doesn't show through from behind */
    background-color: white;
}

If, on the other hand, you want all the content to move down vertically so it's below the nav, check out the other answer by Epicular.

Answer 3

It's because your nav class is a fixed height of 50px. If you kill that in your media query, the menu will take up its own space and push the text down.

Answer 4

Use javascript to toggle the menu

  html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  font-family: "helvetica neue", sans-serif;
}

.nav {
  border-bottom: 1px solid #eaeaeb;
  text-align: right;
  height: 50px;
  line-height: 50px;
}

.menu {
  margin: 0 30px 0 0;
}

.menu a {
  clear: right;
  text-decoration: none;
  color: gray;
  margin: 0 10px;
  line-height: 50px;
}

span {
  color: #54D17A;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 50px;
  display: none;
  width: 26px;
  float: right;
}

#toggle {
  display: none;
}


/*Media*/

@media only screen and (max-width:500px) {
  .stuff {
  position:relative;
    z-index: 9;
  }
  label {
    display: block;
    cursor: pointer;
  }
  .menu {
    text-align: center;
    width: 100%;
    background: #333;
    position:relative;
    z-index: 99;
  }
  .menu a {
    display: block;
    border-bottom: 1px solid #eaeaeb;
    margin: 0;
    line-height: 50px;
  }
  #toggle:checked+.menu {
    display: block;
  }
  #menu a:clicked+.menu {
    display: none;
  }

<div class="nav">
  <label for="toggle">&#9776;</label>
  <input type="checkbox" id="toggle" />
  <div class="menu">
    <a href="#">Business</a>
    <a href="Services.html">Services</a>
    <a href="#">Learn more</a>
    <a href="#"><span>Free Trial</span></a>
  </div>
</div>
<div class="stuff">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus similique voluptatum quas sit accusantium molestiae, cupiditate magnam soluta, ab inventore possimus placeat ipsum eum perspiciatis ipsam nobis nulla tenetur assumenda.
</div>