Product Landing Page

[MarkKozul93]

Product Landing Page

I am interested how can i fix my navigation bar to top when scrolling? I applied the position sticky but it doesn’t help and when i apply fixed it is fixed but the rest of content(hero) gets behind it(like it isn’t there anymore).

Thanks in advance!

[larrycode1]

Well i can see so many errors in your code…You want to your nav bar to be at the top of the view port but you didn’t style the parent tag which is (nav-bar), you only styled the following below

ul {
  list-style: none;
  position: top;
}
ul li{
  text-decoration: none;
  display: inline-block;
  padding: 0px 20px;
  
}
ul li a {
  transition: all 0.3s ease 0s;
  text-decoration: none;
}
ul li a:hover {
  color: #0088a9
}

Also, you have so many errors in your html structure and if you don’t have in in the proper order your code won’t work…You ended the nav bar section with an ending but didn’t add a starting

tag not only that, you segregated your contact from the rest of the

but why and also you didn’t add and

to your contact section…

<nav id="nav-bar">
        <ul>
          <li><a class="nav-link" href="#Features">Features</a></li>
          <li><a class="nav-link" href="#How_It_Works">How It Works</a></li>
          <li><a class="nav-link" href="#Pricing">Pricing</a></li>
        </ul>
        </div>
      </nav>
      <a class="cta" href="#"><button>Contact</button></a>
    </header>
    <hr>
  </section>

[lasjorg]

You have to give the header an offset top: 0 with position: sticky and you have to move the header element out of the section so it is inside the body (the body should be the scroll container for the sticky element).

position - CSS: Cascading Style Sheets | MDN

---

Also, validate your HTML.