Streaming live at 10am (PST)

FIexed navbar scroll to right spot on section


#1

I have a site where i put a fixed navbar and im trying to get it to work so that when i click on a link in the header it scrolls to the appropriate spot on the section. Problem is it is hidden behind the header. Ive tried and tried to get it working so im reaching out for help.

Here is the webflow link https://preview.webflow.com/preview/asburys?preview=f2c91ef7505e5817cf1c2aa41d47dc67

Im using chrome browser.

In the image ive clicked the link, but the whole section is not visible.

Hope this is clear enough

Bill


#2

Hi @oceanandsnowdesign

For make section scroll not to top of the screen but to the bottom of the navigation, you will have to change "relationship" of elements a little bit. Header (with tag header) should have position:fixed, and navigation inside of it should be with position:absolute. Giving header height in px that will save navigation styling and it is done.

In this way Header "grab" that area from the screen and all sections will scroll to the bottom of header. (sorry for my English)

Here is screencast how I did that:
https://nimbus.everhelper.me/client/notes/share/video/297697/SU0piKOn2b9uVWUVndq64J81C6TgH8xz/none/cap1443642178623/video.webw

Regards,
Anna


#3

Wow, thank you so much Sabanna! Nailed it wink


#4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.