Fixed Top Navigation Bar Covering Words?-CodePudding

I am trying to create a fixed navigation bar (so when you scroll down it stays at the top), but when I set it to fixed it then covers the words on the page. I'm not sure how to resolve this so that the words (when at the top of the page) are not covered by the navigation bar, and they are only covered when scrolled (I'm not sure if this makes sense, I am very sorry if it doesn't I'm quite new at this.)

Here is the code for the nav bar:

.topnav {
  background-color: #333333;
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
  position: fixed;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
}

I tried writing this code and added margin-top, but it still gets covered at the top of the page:

.maintxt {
  margin: auto;
  margin-left: 250px;
  margin-right: 250px;
  margin-top: 50px;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
}

Here is an image: Navigation Bar Covering Words

CodePudding user response：

position: fixed puts the navigation bar on top of the content, so on the z axis (z-index) your navigation bar is at the very top. For this reason, no more space is reserved for the navigation bar on the level below (z-index - 1). Your solution approach is correct, you need to move the content of your page down. If your navigation bar is 50 pixels high, the content of your page must be moved down by at least(!) 50 pixels.

Unfortunately you did not publish your complete code, so I can only give you a general example:

html, body {
  margin: 0;
  padding: 0;
}

#navbar {
  background: red;
  height: 50px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

#content {
  margin-top: 50px;
}

<div id="navbar"></div>
<div id="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>