html – Made a CSS hamburger menu, but it doesn't cover the background/main-ThrowExceptions

Exception or error:

I followed a tutorial on how to make a hamburger menu in css with media queries,
but when the dropdown menu folds down It does not cover or lay on top of the content on the page. Instead it is transparent.

How do I fix this or what am I doing wrong?

  .nav {
  border-bottom: 1px solid #EAEAEB;
  text-align: right;
  height: 70px;
  line-height: 70px;
  background-color: #000;
  /*black nav bg*/
}

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

.menu a {
  clear: right;
  text-decoration: none;
  color: #aaaaaa;
  margin: 0 10px;
  line-height: 70px;
  background-color: #000;
  /*black nav dropdown*/
}

span {
  color: #54d17a;
}

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

#toggle {
  display: none;
}

@media only screen and (max-width: 550px) {
  label {
    display: block;
    cursor: pointer;
  }
  .menu {
    text-align: center;
    width: 100%;
    display: none;
  }
  .menu a {
    display: block;
    border-bottom: 1px solid #EAEAEB;
    margin: 0;
  }
  #toggle:checked+.menu {
    display: block;
  }
<div class="nav">
  <label for="toggle">☰</label>
  <input type="checkbox" id="toggle" />
  <div class="menu">
    <a href="#">one</a>
    <a href="#">two</a>
    <a href="#">three</a>
    <a href="#">four</a>
    <a href="#"><span>five</span></a>
  </div>
</div>
How to solve:

for this to work first i added position: relative but as this needs to be on top, you wanna use absolute, or fixed if needs to be always on screen.

note: node elements respect the first parent that has position setted, if the parent doesn’t have it, the node will search for the ‘grandpa’ and this repeats until it finds one that has, or finally anchor itself on the html tag.

.nav{
    border-bottom: 1px solid #EAEAEB;
    text-align: right;
    height: 70px;
    line-height: 70px;
    background-color: #000; /*black nav bg*/
    position: absolute; /*position absolute to its parent*/
    top: 0; /*stay on top of parents border*/
    left: 0; /*stay on left of parents border*/
    width: 100%; /* width have to be explicit added in this case*/
}

p{ 
  margin-top: 70px; /*yes, the same as the nav height.because absolute nodes are 'flying' over the document. and they leave a hole under then.*/
  color:red; /*just so i can see it*/
}

<!-- just changed the above -->

.menu {
    margin: 0 30px 0 0;



}

.menu a {
    clear:right;
    text-decoration: none;
    color:#aaaaaa;
    margin: 0 10px;
    line-height: 70px;
    background-color: #000;/*black nav dropdown*/

}

span{
    color: #54d17a;
}

label{
    margin:0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display:none;
    width: 26px;
    float:right;
    color: #fff;



}

#toggle{
    display: none;

}


@media only screen and (max-width: 550px){

    label{
        display: block;
        cursor: pointer;
    }

    .menu{
        text-align: center;
        width: 100%;
        display:none;
    }

    .menu a{
        display:block;
        border-bottom: 1px solid #EAEAEB;
        margin: 0; 

    }

    #toggle:checked + .menu{
    display:block;
      z-index: 4;
    }
<div class="nav">
    <label for="toggle">☰</label>
    <input type="checkbox" id="toggle"/>
    <div class="menu">
      <a href="#">one</a>
      <a href="#">two</a>
      <a href="#">three</a>
      <a href="#">four</a>
      <a href="#"><span>five</span></a>
    </div>
</div>
<span>123<span> <!-- always under menu, not what you want -->
<p>test</p> <!-- what you want -->

Leave a Reply

Your email address will not be published. Required fields are marked *