Потоки контента ниже навигации (меню): адаптивный веб-сайт

Question

Я решил загрузить свой отзывчивый веб-сайт, хотя заметил, что содержимое (в данном случае фиктивный текст) не остается ниже меню навигации.

(http://www.azhir.co.uk/web_zip/default.html)

Как вы увидите, это стиль basi c css, и я использую стиль css для создания меню гамбургера бар.

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

    body {
          font-family: "Helvetica Neue",sans-serif;
          font-weight: lighter;
    }

    header {
          width: 100%;
          height: 0.01vh;
          background-color: red;
    }

    .content {
          width: 94%;
          margin: 4em auto;
          font-size: 20px;
          line-height: 30px;
          text-align: justify;
    }

    .logo {
          line-height: 60px;
          position: fixed;
          float: left;
          margin: 16px 46px;
          color: black;
          font-weight: bold;
          font-size: 20px;
          letter-spacing: 2px;
    }

    nav {
          position: fixed;
          width: 100%;
          line-height: 60px;
    }

    nav ul {
          line-height: 60px;
          list-style: none;
          background: rgba(0, 0, 0, 0);   /*transparency rgba(0,0,0,0)*/
          overflow: hidden;
          color: #fff;
          padding: 0;
          text-align: right;
          margin: 0;
          padding-right: 40px;
          transition: 1s;
    }

    nav.black ul {
          background: white;  /*changes color of bar*/
    }

    nav ul li {
          display: inline-block;
          padding: 16px 40px;;
    }

    nav ul li a {
          text-decoration: none;
          color: black;
          font-weight: bold;
          font-size: 16px;
    }

    .menu-icon {
          line-height: 60px;
          width: 100%;
          background: white; /*changes hamburger color*/
          text-align: right;
          box-sizing: border-box;
          padding: 15px 24px;
          cursor: pointer;
          color: black;
          display: none;
    }

    @media(max-width: 786px) {

          .logo {
                position: fixed;
                top: 0;
                margin-top: 16px;
          }

          nav ul {
                max-height: 0px;
                background: white; /*mobile color*/
          }

          nav.black ul {
                background: white;
          }

          .showing {
                max-height: 34em;
          }

          nav ul li {
                box-sizing: border-box;
                width: 100%;
                padding: 24px;
                text-align: center;
          }

          .menu-icon {
                display: block;
          }

    }

Это css для моего меню. css

body{
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: white;
}

a{
  color: black;
}

.header{
  background-color: white;
  box-shadow:1px 1px 4px 0 rgba(0,0,0,.1);
  position:fixed;
  width:100%;
  z-index:3;
}

.header ul{
  margin:0;
  padding:0;
  list-style:none;
  overflow:hidden;
  background-color:white;
}

.header ul a{
  display:block;
  padding:20px;
  boder-right:1px solid grey;
  text-decoration: none;
}

.header ul a:hover{
  background-color: #e6e6e6;
}



.header .logo{
  float:left;
  display:block;
  font-size: 2em;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
}

.header .menu{
  clear:both;
  max-height:0;
  transition:max-height .2s ease-out;
}

/*hamburger*/

.header .menu-icon{
  padding: 28px 20px;
  position: relative;
  float:right;
  cursor:pointer;
}


.header .menu-icon .nav-icon{
  background:black;
  display: block;
  height:2px;
  width:18px;
  position:relative;
  transition: background .2s ease-out;
}

.header .menu-icon .nav-icon:before{
  background:black;
  content:"";
  display:block;
  height:100%;
  width:100%;
  position:absolute;
  transition: all .2s ease-out;
  top:5px;
}

.header .menu-icon .nav-icon:after{
  background:black;
  content:"";
  display:block;
  height:100%;
  width:100%;
  position:absolute;
  transition: all .2s ease-out;
  top:-5px;
}

.header .menu-btn{
  display: none;
}

.header .menu-btn:checked ~ .menu{
  max-height:240px;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon{
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:before{
  transform: rotate(-45deg);
  top:0;
}

.header .menu-btn:checked ~ .menu-icon .nav-icon:after{
  transform: rotate(45deg);
  top:0;
}

@media (min-width:48em){
  .header li{
    float:left;
  }
  .header li a{
    padding:20px 30px;
  }

  .header .menu{
    clear:none;
    float:right;
    max-height: none;
  }

  .header .menu-icon{
    display:none;
  }

  .header .logo{
    float:left;
    display:block;
    font-size: 2em;
    padding: 10px 8%;
    text-align: center;
    text-decoration: none;
  }

}

/*content*/
.content {
  width: 85%;
  font-size: 20px;
  line-height: 30px;
  text-align: inherit;
  margin-left:  auto;
  margin-right: auto;
}

, а код html довольно простой c и просто;

<html>
  <head>
    <link rel="stylesheet" href="css/menu.css">
  </head>

  <body>
    <header class="header">
      <a href="/" class="logo">Azhir Mahmood</a>
      <input class="menu-btn" type="checkbox" id="menu-btn"/>
      <label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
      <ul class="menu">
        <li><a href="#ALPHA">ALPHA</a></li>
        <li><a href="#BETA">BETA</a></li>
        <li><a href="#GAMMA">GAMMA</a></li>
      </ul>
    </header>

    <div class="content">
          <p>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </p>
          <p>

  </body>
</html>

Answer 1

Добро пожаловать на SO!

Set padding-top: 58px on .content CLASS

WHY

Потому что у вас заголовок с высотой 5 8px is fixed, поэтому он оставляет свое место .. чтобы покрыть его, вам нужно заполнить его до высоты заголовка. Это исправление завершено, когда мы используем заголовок fixed, absolute, sticky (без пробела DOM)