How to bring content/element down when using position fixed

Question

How do I move the content down when using position fixed on my nav-bar? My page goes to the top since I use position:fixed. I can use margin-bottom, but then my navbar isn't exactly at the top of the screen. (yes I have margin:0 and padding:0 inside *).

Link: https://codepen.io/Altinzzz/pen/ZEWawxV

Code

html

<div class="topnav" id="myTopnav">
    <a href="websitecar.html"> Home</a>
    <a href="aboutus.html" class="active"> About Us</a>
    <a href="contactus.html">Contact</a>
    <a href="#about">About</a>
</div>

<div class = "introduction">
    <span class = "introductionText"> Welcome </span>
    <span class = "introductionText2"> About us </span>
</div>

css

*{
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
 }

.topnav {
   overflow: hidden;
   background-color: #312E2E;
   position: fixed;
   width: 100%;
   z-index: 2;
   float: left;
}

.topnav a {
   float: left;
   display: block;
   color: white;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
 }

 .introduction{
    text-align:center;
    padding: 0;
 }

 .introduction span{
    display: block;
    animation-fill-mode: forwards;
 }

 .introductionText{
     font-size: 80px;
     background: white;
     color:black;
     letter-spacing: -50px;
     font-weight: 400;
     position: relative;
     animation: text 3s 1;

 }

 .introductionText2{
     font-size: 40px;
     background: white;
     font-weight: 400;
     margin-bottom: 50px;
 }

Answer 1

Thanks for the recommendations guys. All three are correct.

Adding padding-top: 50px; to .introduction worked, and so did adding padding-top: 50px; to the body and then putting top: 0;, inside topnav.

Answer 2

When you use position:fixed it takes the element out of the flow. Therefore the rest of the page starts at the top as if the fixed element doesn't even exist. This means that applying margin or any other CSS to it won't affect any other elements.

Instead you need to add space for it on the rest of the page, e.g. add padding or margin to the top of the next element, e.g.

 .introduction{
    text-align:center;
    padding: 50px 0 0;
 }

For easier maintenance, it might be better to add outer container for all pages to add this space, especially if the first element in each page is not the same e.g.

.page-container{
    padding-top: 50px;
}

And the HTML would be something like:

<div class="topnav" id="myTopnav"> ... </div>

<div class="page-container">
     ... whatever elements you have...
</div>
  

Considerations for Responsive Design: Note that if the nav wraps, then a fixed padding won't be enough - in this case you might need to look at media queries or using the hamburger menu to keep the nav bar the same height to overcome this issue.

Working Example:

* {
  font-family: Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}

.topnav {
  overflow: hidden;
  background-color: #312E2E;
  position: fixed;
  width: 100%;
  z-index: 2;
  float: left;
}

.topnav a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.page-container {
  padding-top: 50px;
}

.introduction {
  text-align: center;
  padding: 0;
}

.introduction span {
  display: block;
  animation-fill-mode: forwards;
}

.introductionText {
  font-size: 80px;
  background: white;
  color: black;
  letter-spacing: -50px;
  font-weight: 400;
  position: relative;
  animation: text 3s 1;
}

.introductionText2 {
  font-size: 40px;
  background: white;
  font-weight: 400;
  margin-bottom: 50px;
}

.contentforscroll {
  background: lightblue;
  height: 800px;
}

<div class="topnav" id="myTopnav">
  <a href="websitecar.html"> Home</a>
  <a href="aboutus.html" class="active"> About Us</a>
  <a href="contactus.html">Contact</a>
  <a href="#about">About</a>
</div>

<div class="page-container">
  <div class="introduction">
    <span class="introductionText"> Welcome </span>
    <span class="introductionText2"> About us </span>
  </div>
  <div class="contentforscroll">
    <p>More content to make the page scroll so you see the fixed element</p>
  </div>
</div>

Answer 3

Please give padding top to body (bigger than height of topnav) And topnav should stick to top so top: 0 should be added;

Please check the following

*{
    font-family: Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
}

body {
  padding-top: 50px;
}

.topnav {
    overflow: hidden;
    background-color: #312E2E;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    float: left;
}

.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: black;
    color: white;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

.topnav .icon {
    display: none;
}
  
@media screen and (max-width: 600px) {
    .topnav a:not(:first-child) {
        display: none;
    }
    .topnav a.icon {
        float: right;
        display: block;
    }
}
  
@media screen and (max-width: 600px) {
    .topnav.responsive {
        position: relative;
    }

    .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }

    .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
    }
}

.introduction{
    text-align:center;
    padding: 0;
}

.introduction span{
    display: block;
    animation-fill-mode: forwards;
}

.introductionText{
    font-size: 80px;
    background: white;
    color:black;
    letter-spacing: -50px;
    font-weight: 400;
    position: relative;
    animation: text 3s 1;

}

.introductionText2{
    font-size: 40px;
    background: white;
    font-weight: 400;
    margin-bottom: 50px;
}


@keyframes text {
    0%{
        color: black;
        margin-bottom: -80px;
        letter-spacing: -10px;
    }
    25%{
        margin-bottom: -80px;
        letter-spacing: 25px;
    }
    80%{
        letter-spacing: 0px;
    }
    100%{
        letter-spacing: 0;
        margin-bottom: -3px;
    }
}

<div class="topnav" id="myTopnav">
        <a href="websitecar.html"> Home</a>
        <a href="aboutus.html" class="active"> About Us</a>
        <a href="contactus.html">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" class="icon" onclick="myFunction()">
          <i class="fa fa-bars"></i>
        </a>
    </div>
    
    <div class = "introduction">
        <span class = "introductionText"> Welcome </span>
        <span class = "introductionText2"> About us </span>
    </div>

Answer 4

add padding-top to introduction