Streaming live at 10am (PST)

Link to Page Section with Fixed Top Navbar - how to define offset value?

Hi there,
I have created a hero section that covers the entire first fold with a scroll down button linking to the second fold. Now, since I have a fixed navbar on top, when I navigate to the second fold, it doesn’t calculate the navbar height in, and consequently, the top part of the second fold is covered. I need that 5 em offset defined when scrolling/linking to the section to account for the navbar. Anyone can refer to a previous post or explain how to do that? Thanks!

Here’s the link to my page:https://preview.webflow.com/preview/myhq-demopage?utm_medium=preview_link&utm_source=designer&utm_content=myhq-demopage&preview=5bd43eb4eba519a0adb5e8ad2ddd3396&mode=preview

Hi @Blanca_Szabo,

add a 5em padding to the next fold.

Hi, thanks, but that’s not solving my problem. My current padding is 4em. I could make it 5 em or 6 em, no problem, but that would mean my content still directly starts under the navbar. I NEED my section to start with a 5 em offset, so that my section with the 4 em padding above and below the content starts from under navbar. Surely there must be a way to do that.

I am at work and so can’t open your preview link (Forum still works though - yay!) but I think I understand your problem as I had a similar one with this site: https://bomber-county-minis.webflow.io/

What I did to ensure that my anchor links worked correctly was create a div (class is called “offsetfix” if you view the source code) with a height to account for the navbar’s height.

Sorry if it’s poorly explained, if you think this might be the correct solution I’ll try and remember to give you my share link when I get home tonight. It’s hard for me to explain what I did properly as it was some time ago and I can’t view my div structure properly on this work PC.

1 Like

Here’s the share link as promised. You’ll see that in each of the sections, I have a div with the class “offsetfix” 100px (in desktop breakpoint) in height serving as the anchor, as the navbar is a set 100px.

Hope this helps.

EDIT for anyone reading: I forgot to mention the negative margin on the “offsetfix” div.

https://preview.webflow.com/preview/bomber-county-minis?utm_medium=preview_link&utm_source=designer&utm_content=bomber-county-minis&preview=76f28b0fd6307ac74ab6d7f393a61775&mode=preview

3 Likes

Brilliant, Andy! Thank you so much!!! Why I didn’t think of this… sometimes the simple math just eludes me. I see you added a 100px offset div to each section, then pulled a negative 100px margin for the top. So that’s the trick! A-ha!

1 Like

Awesome! I’m very happy to have helped. I’d forgotten about the negative margin, I was a bit tired when I posted that so I’m glad you found it haha.

That was also my first solution provided on these forums - thanks for marking it as such :slight_smile: I’m not sure if my approach was the best or most efficient one, but it works!

All the best with your project!

@ryanauger I’m glad this helped you buddy :slight_smile:

1 Like