Mon. Oct 2nd, 2023

[ANSWERED] html – My navbar isn’t scrolling when I use position: sticky

By

Nov 20, 2022 css, html

Solution 1 :

#navbar {
  max-width: 100%;
  background-color: black;
  top: 0;
}

nav span:hover {
  border-bottom: 1px solid rgb(200, 140, 16);
}
nav a:hover {
  color: rgb(200, 140, 16);
}

ul {
  display: flex;
  height: 30px;
  padding: 0px;
}
nav {
  font-family: "Odibee Sans", cursive;
  font-size: 25px;
  margin: 0 auto;
  border-bottom: 1px solid rgb(200, 140, 16);
  z-index: 1;
  text-decoration: none;
  display: flex;
  justify-content: center;
  position: sticky;
  top: 0;
}
#topper{
  height: 200px;
  width: 100%;
}

<body>
    <header>
      <div id="banner-container">
        <img id="topper" src="https://images-eu.ssl-images-amazon.com/images/I/41lMD31ltzL.jpg" />
      </div>
      <nav id="navbar">
        <div id="side-icon">
          <a href="#top"><img src="../copo.png"/></a>
        </div>
        <div class="link-container">
          <ul id="list-container">
            <li>
              <div class="links">
                <a href="../home/index.html"><span>Our Story</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Our Vehicles</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a href="#recent" class="active"><span>News</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Sign In</span></a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
      <div>
       <p>
        <img src="https://images-eu.ssl-images-amazon.com/images/I/41lMD31ltzL.jpg" />
       </p>
      </div>
    </header>

Solution 2 :

You forgot to use top: 0; after position: sticky;

Like this

position: sticky;
top: 0;

Problem :

I have looked over some of the other questions regarding non-sticking nav bars, but I still haven’t fixed it. It might have something to do with the way I placed my tags, but I’m not quite sure. I might just be placing the sticky code in the wrong CSS selector.

Here is my code:

#navbar {
  max-width: 100%;
  background-color: black;
  top: 0;
}

nav span:hover {
  border-bottom: 1px solid rgb(200, 140, 16);
}
nav a:hover {
  color: rgb(200, 140, 16);
}

ul {
  display: flex;
  height: 30px;
  padding: 0px;
}
nav {
  font-family: "Odibee Sans", cursive;
  font-size: 25px;
  margin: 0 auto;
  border-bottom: 1px solid rgb(200, 140, 16);
  z-index: 1;
  text-decoration: none;
  display: flex;
  justify-content: center;
  position: sticky;
}

<body>
    <header>
      <div id="banner-container">
        <img id="topper" src="./newstop.png" />
      </div>
      <nav id="navbar">
        <div id="side-icon">
          <a href="#top"><img src="../copo.png"/></a>
        </div>
        <div class="link-container">
          <ul id="list-container">
            <li>
              <div class="links">
                <a href="../home/index.html"><span>Our Story</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Our Vehicles</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a href="#recent" class="active"><span>News</span></a>
              </div>
            </li>
            <li>
              <div class="links">
                <a><span>Sign In</span></a>
              </div>
            </li>
          </ul>
        </div>
      </nav>
    </header>

Comments

Comment posted by Arcane26

Thank you, looking at the snippet made me realize it was trapped within the

tag. Removing the tag allowed it to move.

Comment posted by Arcane26

I added top: 0; Below position: sticky; in the CSS but the nav bar still isn’t catching.

By

Related Post

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022