Why does my header moves down when I set it fixed?

You are facing a margin collapsing issue. After making the header fixed, you removed it from the flow and your form become the first in-flow element thus its top margin will collpase with the top margin of the body¹. This mean that the body will have a big top margin and your fixed element will be positioned considering the body since you didn’t set any top value².

To avoid this you simply need to disable margin-collapsing (which I recommend in order to avoid other issues) or set top value to move the element where you want.

@import "https://fonts.googleapis.com/css?family=Permanent+Marker|Work+Sans|Oswald|Baloo+Bhaijaan|Roboto" ;
  
body {
 padding-top:1px; /*disable margin-collpasing*/
}
  
  #header{
    background-color:#191919;
    height:3rem;
    width:100%;
    position:fixed;
}

#header-img{
  font-family: 'Permanent Marker', cursive;
  color:white;
  margin-left:1.5rem;
  float:left;
  font-size:25px;
}
ul{
  list-style:none;
  display:flex;
  flow-direction:row;
  justify-content:space-around;
}

#nav-bar{
  background-color:#191919;
  float:left;
  width:100%;
}

#form{
  margin-top:45rem;
  margin-left:25%;
  margin-right:25%;
}

img{
  width:70%;
  height:70%;
}

a {
  text-decoration:none;
  font-family: 'Work Sans', cursive;
  color:white;
  font-size:12px;
}

#email{
  width:100%;
  box-shadow:3px 3px 5px grey;
}

#submit{
  font-family:'Roboto', cursive;
  font-size:14px;
  font-weight:bold;
  color:#686868;
  box-shadow:3px 3px 5px grey;
  padding: 5px 5px;
}

.catalog{
  margin-left:10%;
  margin-right:10%;
  margin-top:5rem;
  width:90%;
  float:left;
}

#password{
  width:100%;
  box-shadow:3px 3px 5px grey;
}

#video{
  margin-top:5rem;
  margin-left:25%;
  margin-right:25%;
  width:50%;
}

#courses{
  display:flex;
  flow-direction:row;
  flex-wrap:wrap;
}

#description{
  font-family: 'Oswald', cursive;
  font-size: 20px;
  text-align:center;
  font-size:16px;
}

li{
  padding: .25rem .5rem;
}

a:hover{
 color:#4ba0c8;
}

.nav-link{
  
}

.course-label{
  font-family: 'Baloo Bhaijaan', cursive;
  font-size:18px;
}


.images{
    margin: 5% 5%;
    padding: 3% 3%;
    width: 10vw;
    height:10vw;
    color:#d2d2d2;
  }

.images:hover{
  background-color:#99d3ff;
  color:#99d3ff;
}

@media (min-width:555px){
  #nav-bar{
    float:right;
    width:20rem;
    margin-right:1rem;
  }
  
  #form{
    margin-top:5rem;
  }
}
@media (min-width:360px){
  a{
    font-size:16px;
  }
  #description{
    font-size:20px;
  }
  #header-img{
    font-size:30px;
  }
  #header{
    height:4.5rem;
  }
}

<header id="header">
  <h1 id="header-img">Codexpert</h1>
  <nav id="nav-bar">
    <ul>
      <li><a href="#">Community</a><li>
      <li><a href="#courses"><b>Catalog</b></a><li>
      <li><a href="#">Pricing</a><li>
    </ul>
  </nav>
</header>
<form id="form">
  <p id="description">Get started for free</p>
  <input type="input" id="email" placeholder="Enter your email"><br>
  <input type="password" id="password" placeholder="Enter your password"><br>
  <input type="submit" value="Submit" id="submit">
</form>
<div class="catalog">
  <div>
  <h2 style="color:gray;">Courses</h2>
    <hr>
  </div>
  <div id="courses">
  <div class="images">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png" alt="python">
    <p class="course-label">Python</p>
  </div>
  <div class="images">
    <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/2f4c04f4-96d0-11e6-9830-00163ed833e7/3163796423/java-runtime-environment-screenshot.png" alt="Java">
    <p class="course-label">Java</p>
       </div>
    <div class="images">
      <img src=https://static.platzi.com/media/achievements/badge-javascript-pro-74a59d28-8f05-4ad6-bca2-e77486bf586d.png alt="JavaScript">
      <p class="course-label">JavaScript</p>
    </div>
    <div class="images">
      <img src="https://ayudawp.com/wp-content/uploads/2014/06/tag-html.png" alt="Html">
      <p class="course-label">Html</p>
    </div>
    <div class="images">
      <img src="https://hype.codes/sites/default/files/icons_for_articles/red/ruby_on_rails.png" alt="Ruby on Rails">
      <p class="course-label">Ruby on Rails</p>
    </div>
    <div class="images">
      <img src="https://www.cbronline.com/wp-content/uploads/2016/07/C.png" alt="C++">
      <p class="course-label">C++</p>
    </div>
     </div>
  </div>
<div>
  <iframe width="718" height="404"
          id="video" src="https://www.youtube.com/embed/UcRtFYAz2Yo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

¹Two margins are adjoining if and only if:

..

both belong to vertically-adjacent box edges, i.e. form one of the following pairs:

top margin of a box and top margin of its first in-flow child^ref

…

²: Why aren’t my absolutely/fixed-positioned elements located where I expect?

More Related Contents:

Leave a Comment Cancel reply