with position: fixed the posts go under the menu-CodePudding

I want the menu bar to stay fixed, but when I use Position: Fixed the posts get corrupted and go under the menu, what should I do to scroll down the posts a little bit below the menu.

I put my code here.

index.html

<body>
    <header>
      <div class="container">
        <div class="logo">Lorem, ipsum dolor.</div>

        <nav class="container-menu">
          <ul>
            <li><a href="#">home</a></li>
            <li><a href="/#about-section">about</a></li>
            <li><a href="#">skills</a></li>
            <li><a href="#">projects</a></li>
            <li><a href="#">contact</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <p>
      Lorem...
    </p>
  </body>

menu.css

html {
  box-sizing: border-box;
  border: 3px solid green;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

header {
  border: 5px solid purple;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  box-shadow: 0 3px 10px grey;
  /* position: fixed; */
}

.container {
  border: 3px solid goldenrod;
  position: relative;
  background: tomato;
  top: 0;
  width: 80%;
  margin: 0 10%;
  z-index: 999999;
}

CodePudding user response：

Just add some margin to the first paragraph:

header   p {
  margin-top: 100px; // example value
}

Also, note that, when you set something position to other that static, set the initial values for top/bottom/left/right:

header {
  top: 0;
  left: 0;
  right: 0;
}

CodePudding user response：

Instead of using fixed, use sticky:

header {
    position: sticky;
    top: 0;
}

CodePudding user response：

If you put position fixed everything else will ignore its bounds. So the next element doesn't know its height. You'll need to add a padding-top to the body (or .container) with the same height as the header.

body{
  padding-top:180px;
}