Fixed navbar + jump scroll

HTML-CSS
1

I want to make my navigation bar fixed so that when I scroll, It will always remain at the top. Also, I would like to be able to click a button and have the page jump to that section. For example, when you click either “shop now” or “shop” in the navbar, I want it to jump down to the section where it says “bots for sale”. I tried different methods(not seen in the codepen) but did not work… I do not want them done for all of them but I just need an example please! Thank you!

1 Like
2

  1. Leveraging the bootstrap css just put the class navbar-fixed-top on your <nav> element. That will fix that navbar to the top.

  2. Navigation links to target on the same page requires that each target has a unique id attribute and that the href attribute be formed like href="#idname".
    So a link to Shop section would look like <a href="#shop">SHOP</a> and some element at the top of that section will have attribute id="shop"

Mixing the two creates an issue though when a link is selected and that corresponding target element scrolls to the top. The top is now buried under your navbar because it is position:fixed - out of the page flow.

If your navbar had a fixed height then the below will fix that.

:target{
  padding-top:70px; /* = to height of navbar */
  margin-top:-70px;
}

Since your navbar is not fixed height you might comb through the bootstrap docs to see if there is a built in solution or example that works for that (scrollspy?). Otherwise you might need a javascript / jQuery solution that re-calculates that offset whenever that dimension changes.

2 Likes
3

Thanks for the solution,it worked

4

Hi!

It is because the na bar is fixed.

Try using scroll-padding-top in your html or body element:
https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/

Cheers