1

Hi guys so I can't seem to get the navbar to remain at the top of the screen. If I use position: fixed, the navbar remains on top of the content so you can't see it. position: sticky doesn't work. I presume this is due to having a set height on the body? Keen to know how to get this working with position: fixed! Here is the code:

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Original Trombones</title>
        <link rel="stylesheet" href="styles.css">
        <script src="https://kit.fontawesome.com/e3044c59d5.js" crossorigin="anonymous"></script>
    </head>
    
    
    <body>
    <div class="wrapper">
    <header>
    <nav class="Navbar">
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
        alt="original trombones logo" class="nav-img">
        <ul class="nav-links">
            <li><a href="#" class="link">Features</a></li>
            <li><a href="#" class="link">How It Works</a></li>
            <li><a href="#" class="link">Pricing</a></li>
        </ul>
    </nav>
    </header>
    <section class="hero">
        <h1>Handcrafted, home-made masterpieces</h1>
        <form class="email-form">
        <div class="email-form">
            <label for="email"></label>
            <input type="email" name="email" id="email" placeholder="Enter your email address" required>
        </div>
        <div class="button-center">
            <input class="sub-button" type="submit" value="GET STARTED">
            </div>
        </form>
    </section>
    
    
    <section class="bus-info">
        <div class="features">
        <div class="icon"><i class="fas fa-fire"></i></div>
        <div class="desc">
    <h2 class="feat-title">Premium materials</h2>
    <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
    </div>
    <div class="features">
        <div class="icon"><i class="fas fa-truck"></i></div>
       <div class="desc">
    <h2 class="feat-title">Fast Shipping</h2>
    <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
    not satisfied.</p>
    </div>
    </div>
    <div class="features">
        <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
        <div class="desc">
            <h2 class="feat-title">Quality Assurance</h2>
            <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
            instrument.</p>
        </div>
    </div>
    </section>
    
    <section class="video">
        <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
        </iframe>
    </section>
    
    <section class="tromb-types">
        <div class="type">
            <h3 class="title-tromb">TENOR TROMBONE</h3>
            <h2 class="price">$600</h2>
            <div class="tromb-desc">
            <p  class="text">Lorem ipsum.</p>
            <p  class="text">Lorem ipsum.</p>
            <p  class="text">Lorem ipsum dolor.</p>
            <p  class="text">Lorem ipsum.</p>
            </div>
            <div class="select-button">
            <input class="sub-button" type="submit" value="SELECT">
            </div>
        </div>
    
            <div class="type">
                <h3 class="title-tromb">BASS TROMBONE</h3>
                <h2 class="price">$900</h2>
                <div class="tromb-desc">
                    <p class="text">Lorem ipsum.</p>
                    <p  class="text">Lorem ipsum.</p>
                    <p  class="text">Lorem ipsum dolor.</p>
                    <p  class="text">Lorem ipsum.</p>
                </div>
                <div class="select-button">
                    <input class="sub-button" type="submit" value="SELECT">
                </div>
            </div>
    
                    <div class="type">
                        <h3 class="title-tromb">VALVE TROMBONE</h3>
                        <h2 class="price">$1200</h2>
                        <div class="tromb-desc">
                            <p  class="text">Lorem ipsum.</p>
                            <p  class="text">Lorem ipsum.</p>
                            <p  class="text">Lorem ipsum dolor.</p>
                            <p  class="text">Lorem ipsum.</p>
                        </div>
                        <div class="select-button">
                            <input class="sub-button" type="submit" value="SELECT">
                        </div>
                    </div>
    </section>
    
    <footer>
    <ul class="footer-links">
        <li><a href="#" class="footer-link">Privacy</a></li>
        <li><a href="#" class="footer-link">Terms</a></li>
        <li><a href="#" class="footer-link">Contacts</a></li>
    </ul>
    <p class="copyright">Copyright 2016, Original Trombones</p>
    
    </footer>
    </div>
    </body>
    </html>
    
    <style>
    
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: "Roboto", sans-serif;
      min-height: 100vh;
      background-color: #eee;
      color: black;
    }
    
    .wrapper {
      display: flex;
      justify-content: center;
      flex-direction: column;
    }
    
    nav {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      font-weight: 900;
      font-size: 1em;
      padding: 20px 10px;
      flex-wrap: wrap;
      border-bottom: 1px solid grey;
      position: sticky;
    }
    
    ul {
      flex-grow: 1;
      max-width: 30%;
      display: flex;
      justify-content: space-around;
      text-decoration: none;
    }
    
    img {
      display: flex;
      width: 40vw;
    }
    
    ul li {
      display: inline;
      text-decoration: none;
      display: flex;
    }
    
    .nav-links a {
      text-decoration: none;
      color: black;
    }
    
    .hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    h1 {
      font-size: 2em;
      font-weight: 700;
      padding: 20px;
    }
    
    h2 {
      font-size: 1.4em;
      font-weight: 700;
    }
    
    p {
      font-size: 0.8em;
      letter-spacing: 0.05em;
    }
    
    input[type="email"] {
      padding: 5px 10px;
      margin: 10px 0px;
      border: solid 1px black;
      width: 350px;
    }
    
    form {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    input[type="submit"] {
      margin: 10px auto;
      padding: 5px 15px;
      background-color: #f1c40f;
      font-weight: 900;
      border: #eee solid 0px;
    }
    
    .bus-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    
    .features {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
    
    .desc {
      weight: 125px;
      width: 80vw;
      padding: 5px;
    }
    
    .icon {
      color: #c5a00df8;
      font-size: 2em;
    }
    
    .feat-title {
    }
    
    .features {
      padding-top: 20px;
      border: 40px 0px;
    }
    
    .video {
      margin: auto;
      padding: 30px 0px;
    }
    
    .tromb-types {
      display: flex;
      justify-content: center;
    }
    
    .type {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 50px;
      margin: 20px 10px;
      border: solid black 1px;
    }
    
    .title-tromb {
      font-weight: 700;
      font-size: 0.8em;
    }
    
    .price {
      padding: 20px 0;
    }
    
    .tromb-desc {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .text {
      padding-bottom: 10px;
    }
    
    footer {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin-bottom: 20px;
      margin-right: 20px;
    }
    
    .footer-links {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      max-width: 100%;
    }
    
    .footer-links .footer-link {
      text-decoration: none;
      padding: 0px 10px;
      color: black;
    }
    
    .copyright {
      max-width: 100%;
      margin-top: 5px;
    }
    
    @media (max-width: 700px) {
      header {
        font-size: 1em;
      }
      nav {
        display: flex;
        flex-direction: column;
      }
    
      nav > ul {
        display: flex;
        flex-wrap: wrap;
      }
      .tromb-types {
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    
      .type {
        width: 300px;
      }
    
      .price {
        padding: 5px 0;
      }
    }
    </style>

0

1 Answer 1

0

1. position : sticky

The easiest way by far is to use sticky position but on header not on nav. Because as element I am sticky as long as my parent is visible on the screen. And since the height of header is not that big, it seems like having position:sticky on nav is not working. To know more about position sticky, you could read here.

Here is the working example:

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
  background-color: #eee;
  color: black;
}

.wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
/* lines I added*/
header {
  position: sticky;
  top: 0;
  z-index: 99;
  background: #eee;
}
nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-weight: 900;
  font-size: 1em;
  padding: 20px 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid grey;
}

ul {
  flex-grow: 1;
  max-width: 30%;
  display: flex;
  justify-content: space-around;
  text-decoration: none;
}

img {
  display: flex;
  width: 40vw;
}

ul li {
  display: inline;
  text-decoration: none;
  display: flex;
}

.nav-links a {
  text-decoration: none;
  color: black;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  font-weight: 700;
  padding: 20px;
}

h2 {
  font-size: 1.4em;
  font-weight: 700;
}

p {
  font-size: 0.8em;
  letter-spacing: 0.05em;
}

input[type="email"] {
  padding: 5px 10px;
  margin: 10px 0px;
  border: solid 1px black;
  width: 350px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input[type="submit"] {
  margin: 10px auto;
  padding: 5px 15px;
  background-color: #f1c40f;
  font-weight: 900;
  border: #eee solid 0px;
}

.bus-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.features {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.desc {
  weight: 125px;
  width: 80vw;
  padding: 5px;
}

.icon {
  color: #c5a00df8;
  font-size: 2em;
}

.feat-title {
}

.features {
  padding-top: 20px;
  border: 40px 0px;
}

.video {
  margin: auto;
  padding: 30px 0px;
}

.tromb-types {
  display: flex;
  justify-content: center;
}

.type {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 50px;
  margin: 20px 10px;
  border: solid black 1px;
}

.title-tromb {
  font-weight: 700;
  font-size: 0.8em;
}

.price {
  padding: 20px 0;
}

.tromb-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text {
  padding-bottom: 10px;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 20px;
  margin-right: 20px;
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  max-width: 100%;
}

.footer-links .footer-link {
  text-decoration: none;
  padding: 0px 10px;
  color: black;
}

.copyright {
  max-width: 100%;
  margin-top: 5px;
}

@media (max-width: 700px) {
  header {
    font-size: 1em;
  }

  nav {
    display: flex;
    flex-direction: column;
  }

  nav > ul {
    display: flex;
    flex-wrap: wrap;
  }

  .tromb-types {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .type {
    width: 300px;
  }

  .price {
    padding: 5px 0;
  }
}
<div class="wrapper">
  <header>
    <nav class="Navbar">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
      <ul class="nav-links">
        <li><a href="#" class="link">Features</a></li>
        <li><a href="#" class="link">How It Works</a></li>
        <li><a href="#" class="link">Pricing</a></li>
      </ul>
    </nav>
  </header>
  <section class="hero">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form class="email-form">
      <div class="email-form">
        <label for="email"></label>
        <input type="email" name="email" id="email" placeholder="Enter your email address" required>
      </div>
      <div class="button-center">
        <input class="sub-button" type="submit" value="GET STARTED">
      </div>
    </form>
  </section>

  <section class="bus-info">
    <div class="features">
      <div class="icon"><i class="fas fa-fire"></i></div>
      <div class="desc">
        <h2 class="feat-title">Premium materials</h2>
        <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div class="features">
      <div class="icon"><i class="fas fa-truck"></i></div>
      <div class="desc">
        <h2 class="feat-title">Fast Shipping</h2>
        <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
          not satisfied.</p>
      </div>
    </div>
    <div class="features">
      <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
      <div class="desc">
        <h2 class="feat-title">Quality Assurance</h2>
        <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
          instrument.</p>
      </div>
    </div>
  </section>

  <section class="video">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
    </iframe>
  </section>

  <section class="tromb-types">
    <div class="type">
      <h3 class="title-tromb">TENOR TROMBONE</h3>
      <h2 class="price">$600</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>

    <div class="type">
      <h3 class="title-tromb">BASS TROMBONE</h3>
      <h2 class="price">$900</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>

    <div class="type">
      <h3 class="title-tromb">VALVE TROMBONE</h3>
      <h2 class="price">$1200</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>
  </section>

  <footer>
    <ul class="footer-links">
      <li><a href="#" class="footer-link">Privacy</a></li>
      <li><a href="#" class="footer-link">Terms</a></li>
      <li><a href="#" class="footer-link">Contacts</a></li>
    </ul>
    <p class="copyright">Copyright 2016, Original Trombones</p>

  </footer>
</div>

2. position : fixed

Fixed would work if you add some padding-top on body, like so:

* {
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  min-height: 100vh;
  background-color: #eee;
  color: black;
  /* line I added*/
  padding-top: 10rem;
}

.wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
/* lines I added*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background: #eee;
}
nav {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-weight: 900;
  font-size: 1em;
  padding: 20px 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid grey;
}

ul {
  flex-grow: 1;
  max-width: 30%;
  display: flex;
  justify-content: space-around;
  text-decoration: none;
}

img {
  display: flex;
  width: 40vw;
}

ul li {
  display: inline;
  text-decoration: none;
  display: flex;
}

.nav-links a {
  text-decoration: none;
  color: black;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

h1 {
  font-size: 2em;
  font-weight: 700;
  padding: 20px;
}

h2 {
  font-size: 1.4em;
  font-weight: 700;
}

p {
  font-size: 0.8em;
  letter-spacing: 0.05em;
}

input[type="email"] {
  padding: 5px 10px;
  margin: 10px 0px;
  border: solid 1px black;
  width: 350px;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

input[type="submit"] {
  margin: 10px auto;
  padding: 5px 15px;
  background-color: #f1c40f;
  font-weight: 900;
  border: #eee solid 0px;
}

.bus-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.features {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.desc {
  weight: 125px;
  width: 80vw;
  padding: 5px;
}

.icon {
  color: #c5a00df8;
  font-size: 2em;
}

.feat-title {
}

.features {
  padding-top: 20px;
  border: 40px 0px;
}

.video {
  margin: auto;
  padding: 30px 0px;
}

.tromb-types {
  display: flex;
  justify-content: center;
}

.type {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 50px;
  margin: 20px 10px;
  border: solid black 1px;
}

.title-tromb {
  font-weight: 700;
  font-size: 0.8em;
}

.price {
  padding: 20px 0;
}

.tromb-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text {
  padding-bottom: 10px;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 20px;
  margin-right: 20px;
}

.footer-links {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  max-width: 100%;
}

.footer-links .footer-link {
  text-decoration: none;
  padding: 0px 10px;
  color: black;
}

.copyright {
  max-width: 100%;
  margin-top: 5px;
}

@media (max-width: 700px) {
  header {
    font-size: 1em;
  }

  nav {
    display: flex;
    flex-direction: column;
  }

  nav > ul {
    display: flex;
    flex-wrap: wrap;
  }

  .tromb-types {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .type {
    width: 300px;
  }

  .price {
    padding: 5px 0;
  }
}
<div class="wrapper">
  <header>
    <nav class="Navbar">
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" class="nav-img">
      <ul class="nav-links">
        <li><a href="#" class="link">Features</a></li>
        <li><a href="#" class="link">How It Works</a></li>
        <li><a href="#" class="link">Pricing</a></li>
      </ul>
    </nav>
  </header>
  <section class="hero">
    <h1>Handcrafted, home-made masterpieces</h1>
    <form class="email-form">
      <div class="email-form">
        <label for="email"></label>
        <input type="email" name="email" id="email" placeholder="Enter your email address" required>
      </div>
      <div class="button-center">
        <input class="sub-button" type="submit" value="GET STARTED">
      </div>
    </form>
  </section>

  <section class="bus-info">
    <div class="features">
      <div class="icon"><i class="fas fa-fire"></i></div>
      <div class="desc">
        <h2 class="feat-title">Premium materials</h2>
        <p class="desc-words">Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div class="features">
      <div class="icon"><i class="fas fa-truck"></i></div>
      <div class="desc">
        <h2 class="feat-title">Fast Shipping</h2>
        <p class="desc-words">We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are
          not satisfied.</p>
      </div>
    </div>
    <div class="features">
      <div class="icon"><i class="fa-solid fa-battery-full"></i></div>
      <div class="desc">
        <h2 class="feat-title">Quality Assurance</h2>
        <p class="desc-words">For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your
          instrument.</p>
      </div>
    </div>
  </section>

  <section class="video">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
    </iframe>
  </section>

  <section class="tromb-types">
    <div class="type">
      <h3 class="title-tromb">TENOR TROMBONE</h3>
      <h2 class="price">$600</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>

    <div class="type">
      <h3 class="title-tromb">BASS TROMBONE</h3>
      <h2 class="price">$900</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>

    <div class="type">
      <h3 class="title-tromb">VALVE TROMBONE</h3>
      <h2 class="price">$1200</h2>
      <div class="tromb-desc">
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum.</p>
        <p class="text">Lorem ipsum dolor.</p>
        <p class="text">Lorem ipsum.</p>
      </div>
      <div class="select-button">
        <input class="sub-button" type="submit" value="SELECT">
      </div>
    </div>
  </section>

  <footer>
    <ul class="footer-links">
      <li><a href="#" class="footer-link">Privacy</a></li>
      <li><a href="#" class="footer-link">Terms</a></li>
      <li><a href="#" class="footer-link">Contacts</a></li>
    </ul>
    <p class="copyright">Copyright 2016, Original Trombones</p>

  </footer>
</div>

3
  • Thanks for the help! I can't get my head why this works for the header and not for the nav?
    – Alex Moody
    Mar 10, 2022 at 16:01
  • Glad I could help! Did you read the explanation I just added ? Mar 10, 2022 at 16:02
  • 1
    I have now. That makes a lot of sense, thanks!
    – Alex Moody
    Mar 10, 2022 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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