Navbar anchor links scrolling under navbar

Bootstrap Studio Help
1

Hey there! I have a one pager that has anchor links from the navbar. When the link from the navbar is clicked, the section scrolls under the navbar to the top of the page.
I’ve tried, sticky top and fixed to top, both have the same results.
If anyone has any advice I would appreciate it.

https://fdic.bss.design
Thanks,
Hills

2

Your anchor link is behaving normally. An anchor link will scroll the div to the top of the page. If you don’t want to scroll the div all the way to the top, you can either create an anchor div above the actual place you want to scroll to, and then use the CSS visibility rule hide it, or a much simpler way is to use the CSS scroll-margin rule. So in your case…

#vertecon {
scroll-margin-top: 80px;
}

will fix your issue. You will need to do this for each link/ID. You might also want to add the following to your custom CSS…

html {
scroll-behavior: smooth;
}

so the site doesn’t just “jump” to the section. It allows visitors to realize the link they clicked brought them to a different place on the page. Also, I encourage you to not use inline styles to create your website. It’s bad practice.

(PS - for future reference, questions pertaining to code, design, etc… are best asked in the Webdesign Help Forum category.)

3

Thanks for the quick reply. I’m new to BSS and finding my way.
Your suggestions worked exactly how I wanted them to.

Thanks for the other advice as well. I’m sorry for posting this in the wrong section.

Thanks again, hills

4

If you have many anchors on your page is it better to set margin-top to the body. In your case like this

body { margin-top:5rem; }

Then you only need one css class

1 Like
5

Thanks! I will try that. I appreciate the help.