Is there any way to make a hamburger menu push down any content under it?

HTML & CSS
1 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>New Roots | Welcome</title>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <header>
    <div class="container">
      <div class="logo"> <!--DIV OPEN FOR LOGO-->
      <img src="./img/transparent.png">
      </div> <!--DIV CLOSE FOR LOGO-->
      <div class="nav">
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle">
        <div class="menu">
          <a href="index.html">Home</a>
          <a href="sell.html">Sell My House</a>
          <a href="about.html">About</a>
        </div>
      </div>
    </div>
  </header>

<!--Section-->
  <section id="showcase">
  <div class="container">
    <h1>Sell Your House Today</h1>
    <p>Sell your house in AS-IS conditions, for a fair CASH OFFER. Whether it is a preforeclosure,
      <br> divorce sale, simply just a stressful home, or whatever the situation may be, we can help!</p>
  </div>
</section>

<section id="newsletter">
  <div class="container">
    <h1>Get Started...</h1>
    <form>
      <input type="text" placeholder="Enter Home Address">
      <button type="submit" class="button_1">Submit</button>
    </form>
  </div>
</section>

<footer>
  <p>New Roots Investments, Copyright &copy; 2018</p>

</footer>

</body>

</html>

CSS

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

body {
   15px/1.5 Arial, Helvetica, sans-serif;
}

/*Global*/
.container {
  width: 80%;
  margin: auto;
  overflow: hidden;
}

/*Global Menu*/
.nav {
  border-bottom: 1px solid #EAEAEB;
  text-align: right;
  height: 70px;
  line-height: 70px;
}

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

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

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

#toggle {
  display: none;
}

@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;
  }
  #toggle:checked + .menu {
    display: block;
  }
}
2

Remove the 70px height from .nav as that limits the height when you open the menu.

Avoid fixed heights on elements that hold fluid content like text wherever possible. If you actually must have a height then make sure you remove it in the media query for the hamburger menu styles.

2 Likes
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.