position: fixed working abruptly, not able to fix the header part at the top

Question

https://github.com/pratypus/grapes_website_builder

I don't know why but whenever im trying to give the header section the property of position: fixed, it works and as usual the content below it gets in behind. Now when I increase the top margin of the main tag, the whole thing including the header comes down instead of only the main content.

Answer 1

You might want to use top property to set the location of that fixed-positioned element. Read more

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

/*Global styles*/
* {
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

/*Header fonts*/

@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v15/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7B1i03Sup8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v12/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*Content fonts*/

@font-face {
  font-family: 'Gayathri';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Gayathri Bold'), local('Gayathri-Bold'), url(https://fonts.gstatic.com/s/gayathri/v2/MCoXzAb429DbBilWLLiE34v_J_U.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Frank Ruhl Libre';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Frank Ruhl Libre Regular'), local('FrankRuhlLibre-Regular'), url(https://fonts.gstatic.com/s/frankruhllibre/v5/j8_w6_fAw7jrcalD7oKYNX0QfAnPW7Dl4Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v16/FwZY7-Qmy14u9lezJ-6H6Mk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*Header*/

h1 {
  font-family: "Dancing Script", sans-serif;
  font-style: italic;
  font-weight: bold;
  color: hsl(337, 92%, 31%);
  font-size: 6em;
  position: relative;
  bottom: 20px;
  left: 30px;
}

.header h3 {
  font-family: "Poppins", monospace;
  font-size: 0.8em;
  color: hsl(11, 80%, 60%);
  position: relative;
  bottom: 18px;
  left: 28px;
}

.header {
  background-color: hsl(81, 33%, 81%);
  width: 100%;
  margin-top: 0;
  margin-right: 0;
}

.header li {
  display: inline-block;
  width: 100px;
  padding: 9px 10px 5px 10px;
  text-align: center;
  margin: 0;
  color: hsl(81, 33%, 81%);
  font-family: "Gayathri";
  border-radius: 5px;
}

.header li:hover {
  background-color: hsl(81, 33%, 81%);
  color: hsl(318, 73%, 22%);
}

#one {
  margin-left: 10px;
}

.header ul {
  background-color: hsl(318, 73%, 22%);
}

.header a {
  color: hsl(81, 33%, 81%);
}

.header a:hover {
  color: hsl(318, 73%, 22%);
}

/*content*/

.content h2 {
  color: hsl(343, 100%, 39%);
  margin-left: 20px;
  margin-top: 20px;
  font-family: "Dancing Script";
  font-weight: 900;
  font-size: 3em;
}

.line_one {
  border: 1px solid black;
  border-radius: 15px;
  width: 150px;
  margin: 20px;
}

.content {
  margin-left: 20px;
  margin-top: 10px;
  font-family: "Poppins";
  font-size: 0.9em;
}

.content a {
  color: hsl(343, 100%, 39%);
}

/*.content a:visited {
  color: hsl(318, 73%, 22%);
}*/

#case_one {
  font-family: "Frank Ruhl Libre";
  font-size: 1.2em;
  font-weight: bold;
}
#case_two {
  font-family: "Pacifico";
  font-size: 1.2em;
}

/*Footer*/

footer {
  background-color: hsl(81, 33%, 81%);
  border: 1px solid hsl(318, 73%, 22%);
  padding: 50px;
  text-align: center;
  margin-top: 40px;
}

.footer p {
  font-family: "Gayathri";
  color: hsl(11, 80%, 60%);
}

.footer h3 {
  font-family: "Poppins";
  color: hsl(337, 92%, 31%);
}

/* Set top:0 to make the header stay at the top of the viewport */

.header {
  position: fixed;
  top: 0;
}

main {
  margin-top: 200px;
}

<html>
  <head>
    <title>Grapes - Website Builder</title>
    <link href = "./resources/styles.css" type = "text/css" rel = "stylesheet">
  </head>

  <body>
    <header class = "header">
      <h1>grapes</h1>
      <h3>A cohesive guide for building websites</h3>
      <nav>
        <ul>
          <a href = "#"><li id = "one">Home</li></a>
          <a href = "#colors"><li>Colors</li></a>
          <a href = "#fonts"><li>Fonts</li></a>
          <a href = "#textstyles"><li>Text Styles</li></a>
        </ul>
      </nav>
    </header>

    <main>
      <section id = "colors" class = "content">
        <h2><a href = "#">Colors</a></h2>
        <hr class = "line_one">
        <p>Having to choose a few colors from more than 16million options can be mind boggling!!<br>Worry not, we've got you covered.</p>
      </section>
      <section id = "fonts" class="content">
        <h2><a href = "#">Fonts</a></h2>
        <hr class="line_one">
        <p>Sometimes you just can't think whether your code should look like <span id = "case_one">"this"</span> or <span id = "case_two">"this".</span><br>Looking for that perfect font to express your thoughts, you're at the right place.</p>
      </section>
      <section id="textstyles" class="content">
        <h2><a href = "#">Text Styles</a></h2>
        <hr class = "line_one">
        <p>Having the perfect font is one thing, but plucking the right chords is something else.<br>Explore all different combinations you can apply to make your text stand out.</p>
      </section>
    </main>

    <footer>
      <section class = "footer">
        <h3>Contact us : </h3>
        <p>e-mail : [email protected]</p>
      </section>
    </footer>
  </body>
</html>