1

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;
 }

4 Answers 4

2

add padding-top to introduction

1

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>

2
  • It should be padding: 48px 0 0, not padding: 50px 0 0 ....you got your answer up before me...lol
    – Dan Mullin
    Sep 4, 2020 at 21:10
  • @DanMullin thanks for the comment! If the nav isn't a fixed height and is based on the font size, I usually allow an extra pixel or two for variations across browser - especially when users have their Windows Display Scale to something other than 100% - the browsers need to recalculate the positions and that can vary from one to the next :) Of course if the 2 divs must to meet without space, then you're better with fixed heights (unfortunately!) Sep 4, 2020 at 21:21
1

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>

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.