Home > database >  Fixing navbar using fixed position or sticky position
Fixing navbar using fixed position or sticky position

Time：03-11

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 >
    <header>
    <nav >
        <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png"
        alt="original trombones logo" >
        <ul >
            <li><a href="#" >Features</a></li>
            <li><a href="#" >How It Works</a></li>
            <li><a href="#" >Pricing</a></li>
        </ul>
    </nav>
    </header>
    <section >
        <h1>Handcrafted, home-made masterpieces</h1>
        <form >
        <div >
            <label for="email"></label>
            <input type="email" name="email" id="email" placeholder="Enter your email address" required>
        </div>
        <div >
            <input  type="submit" value="GET STARTED">
            </div>
        </form>
    </section>
    
    
    <section >
        <div >
        <div ><i ></i></div>
        <div >
    <h2 >Premium materials</h2>
    <p >Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
        </div>
    </div>
    <div >
        <div ><i ></i></div>
       <div >
    <h2 >Fast Shipping</h2>
    <p >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 >
        <div ><i ></i></div>
        <div >
            <h2 >Quality Assurance</h2>
            <p >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 >
        <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
        </iframe>
    </section>
    
    <section >
        <div >
            <h3 >TENOR TROMBONE</h3>
            <h2 >$600</h2>
            <div >
            <p  >Lorem ipsum.</p>
            <p  >Lorem ipsum.</p>
            <p  >Lorem ipsum dolor.</p>
            <p  >Lorem ipsum.</p>
            </div>
            <div >
            <input  type="submit" value="SELECT">
            </div>
        </div>
    
            <div >
                <h3 >BASS TROMBONE</h3>
                <h2 >$900</h2>
                <div >
                    <p >Lorem ipsum.</p>
                    <p  >Lorem ipsum.</p>
                    <p  >Lorem ipsum dolor.</p>
                    <p  >Lorem ipsum.</p>
                </div>
                <div >
                    <input  type="submit" value="SELECT">
                </div>
            </div>
    
                    <div >
                        <h3 >VALVE TROMBONE</h3>
                        <h2 >$1200</h2>
                        <div >
                            <p  >Lorem ipsum.</p>
                            <p  >Lorem ipsum.</p>
                            <p  >Lorem ipsum dolor.</p>
                            <p  >Lorem ipsum.</p>
                        </div>
                        <div >
                            <input  type="submit" value="SELECT">
                        </div>
                    </div>
    </section>
    
    <footer>
    <ul >
        <li><a href="#" >Privacy</a></li>
        <li><a href="#" >Terms</a></li>
        <li><a href="#" >Contacts</a></li>
    </ul>
    <p >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>

CodePudding user response：

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 >
  <header>
    <nav >
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" >
      <ul >
        <li><a href="#" >Features</a></li>
        <li><a href="#" >How It Works</a></li>
        <li><a href="#" >Pricing</a></li>
      </ul>
    </nav>
  </header>
  <section >
    <h1>Handcrafted, home-made masterpieces</h1>
    <form >
      <div >
        <label for="email"></label>
        <input type="email" name="email" id="email" placeholder="Enter your email address" required>
      </div>
      <div >
        <input  type="submit" value="GET STARTED">
      </div>
    </form>
  </section>

  <section >
    <div >
      <div ><i ></i></div>
      <div >
        <h2 >Premium materials</h2>
        <p >Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div >
      <div ><i ></i></div>
      <div >
        <h2 >Fast Shipping</h2>
        <p >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 >
      <div ><i ></i></div>
      <div >
        <h2 >Quality Assurance</h2>
        <p >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 >
    <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
    </iframe>
  </section>

  <section >
    <div >
      <h3 >TENOR TROMBONE</h3>
      <h2 >$600</h2>
      <div >
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum dolor.</p>
        <p >Lorem ipsum.</p>
      </div>
      <div >
        <input  type="submit" value="SELECT">
      </div>
    </div>

    <div >
      <h3 >BASS TROMBONE</h3>
      <h2 >$900</h2>
      <div >
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum dolor.</p>
        <p >Lorem ipsum.</p>
      </div>
      <div >
        <input  type="submit" value="SELECT">
      </div>
    </div>

    <div >
      <h3 >VALVE TROMBONE</h3>
      <h2 >$1200</h2>
      <div >
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum dolor.</p>
        <p >Lorem ipsum.</p>
      </div>
      <div >
        <input  type="submit" value="SELECT">
      </div>
    </div>
  </section>

  <footer>
    <ul >
      <li><a href="#" >Privacy</a></li>
      <li><a href="#" >Terms</a></li>
      <li><a href="#" >Contacts</a></li>
    </ul>
    <p >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 >
  <header>
    <nav >
      <img src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="original trombones logo" >
      <ul >
        <li><a href="#" >Features</a></li>
        <li><a href="#" >How It Works</a></li>
        <li><a href="#" >Pricing</a></li>
      </ul>
    </nav>
  </header>
  <section >
    <h1>Handcrafted, home-made masterpieces</h1>
    <form >
      <div >
        <label for="email"></label>
        <input type="email" name="email" id="email" placeholder="Enter your email address" required>
      </div>
      <div >
        <input  type="submit" value="GET STARTED">
      </div>
    </form>
  </section>

  <section >
    <div >
      <div ><i ></i></div>
      <div >
        <h2 >Premium materials</h2>
        <p >Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div >
      <div ><i ></i></div>
      <div >
        <h2 >Fast Shipping</h2>
        <p >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 >
      <div ><i ></i></div>
      <div >
        <h2 >Quality Assurance</h2>
        <p >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 >
    <iframe width="420" height="315" src="https://www.youtube.com/embed/tgbNymZ7vqY">
    </iframe>
  </section>

  <section >
    <div >
      <h3 >TENOR TROMBONE</h3>
      <h2 >$600</h2>
      <div >
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum dolor.</p>
        <p >Lorem ipsum.</p>
      </div>
      <div >
        <input  type="submit" value="SELECT">
      </div>
    </div>

    <div >
      <h3 >BASS TROMBONE</h3>
      <h2 >$900</h2>
      <div >
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum dolor.</p>
        <p >Lorem ipsum.</p>
      </div>
      <div >
        <input  type="submit" value="SELECT">
      </div>
    </div>

    <div >
      <h3 >VALVE TROMBONE</h3>
      <h2 >$1200</h2>
      <div >
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum.</p>
        <p >Lorem ipsum dolor.</p>
        <p >Lorem ipsum.</p>
      </div>
      <div >
        <input  type="submit" value="SELECT">
      </div>
    </div>
  </section>

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

  </footer>
</div>

Page link：https//www.codepudding.com/database/330777.html

Prev:my javascript file will not link to my index.html file and i see nothing wrong with it. What is wron
Next:filling select input using the value from a map where the key is from another select input
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding