position fixed pushes everything below it down creating white space?

Question

Hey guy's I'm making a website for a construction company and I just finished the header section. I'm now going back and setting the nav section to position: fixed;doing this however pushes the nav section and everything below it down like 500px creating some ugly whitespace. Can I get some help on this issue? Thanks:)

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

/*---HEADER---*/

header {
 background-image: url(img/wall2.jpeg);
 height: 100vh;
 background-attachment: fixed;
}

nav {
 background-color: white;
 width: 100%;
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: fixed;
}

.logo, ul {
 flex-basis: 30%;
 list-style-type: none;
}

ul {
 margin-right: 30px;
}

li {
 display: inline-block;
 font-size: 1.3rem;
 margin-right: 20px;
 font-family: 'MontSerrat';
 color: rgba(102,102,102,0.75);
}

li:hover {
 cursor: pointer;
 color: #1a1a1a;
 transition: all 0.7s ease;
}

.after:after {
 position: relative;
 left: 12px;
 top: 2px;
 display: inline-block;
 content: "";
 width: 1px;
 height: 20px;
 background-color: rgba(102,102,102,0.25);
}

.logo {
 color: red;
 font-size: 4rem;
 margin: 10px;
 opacity: 1;
 margin-left: 30px;
}

.phrase {
 text-align: center;
 margin-top: 275px;
}

.phrase p {
 color: white;
 font-size: 3.5rem;
 font-family: 'Arvo';
 margin-bottom: 30px;

}

.phrase a {
 background-color: #e62e00;
 border-radius: 25px;
 color: white;
 font-family: 'Bitter';
 font-size: 1.8rem;
 padding-left: 15px;
 padding-right: 15px;
 padding-bottom: 10px;
 padding-top: 10px;
}

.phrase a:hover {
 background-color: #cc2900;
 transition: all 0.5s ease;
 cursor: pointer;
}

.phrase .fas {
 display: block;
 color: white;
 font-size: 3.5rem;
 margin-top: 15px;
}

/*---ABOUT---*/

.stats {
 width: 100%;
 height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Kane Concrete And Construction LLC</title>
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
 <link href="https://fonts.googleapis.com/css?family=Arvo|Bitter|Lato|Montserrat|Noto+Sans|Open+Sans|Poppins|Roboto|Sarabun|Ubuntu" rel="stylesheet">
 <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
</head>
<body>
 <header>
  <nav>
   <div class="logo">
    <i class="fab fa-accusoft"></i>
   </div>

   <div class="nav">
    <ul>
     <li class="after">Home</li>
     <li class="after">About</li>
     <li class="after">Services</li>
     <li class="after">Job Openings</li>
     <li class="after">Gallery</li>
     <li>Contact</li>
    </ul>
   </div>
  </nav>
  
  <div class="phrase">
   <p>It all starts at the foundation.</p>
   <a>Get a Quote</a>
   <i class="fas fa-angle-down"></i>
  </div> 
 </header>

 <main>
  <div class="stats">
   <div class="start-year">
    
   </div>

   <div class="projects">
    
   </div>
  </div>
 </main>
</body>
</html>

It's the huge `margin-top` on `.phrase` that affects it. Either get `.phrase` out of `
` or get `
` out of `
`. To understand more about the cause, read on [collapsing margins](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). Basically the top margin of `
` gets set by its first document flow element, which is `.phrase`. — tao, Jan 26 '19 at 22:58

score 1 · Answer 1 · answered Jan 26 '19 at 22:48

1

When you use position: absolute or position: fixed, it's a good practice to position it appropriately using top, right, left and bottom.

So, you can add to your CSS:

nav {
  top: 0;
  left: 0;
}

answered Jan 26 '19 at 22:48

Azametzin

5,223
12
28
46

What about the extra space between the nav section and the image? and the text thats in the image was centered in the the image now its at the top of the image? – Alfred Jan 26 '19 at 22:52

position fixed pushes everything below it down creating white space?

1 Answers1