▼
Streaming live at 10am (PST)

How do I change the landing spot on a page section when I click on a link on the nav bar?

Design help General
#1

Hello all,
I have limited knowledge in CSS so I’d really appreciate any help I can get! I am creating a website with a fixed navbar but when I click on the link on the nav to take me to a certain section on the page, the landing spot omits the title and starts directly from the paragraph. I’d like for the section to start from the title instead.

Here is the read only link to the website https://preview.webflow.com/preview/fitzroyhealth-demosite?preview=32e7a64541eb99a0943ee69028cd06ac

You will notice that when you click on the ‘benefits’ or ‘contact’ section of the website it takes you to the corresponding section but the title is left out. Would it be possible to have the section start from the title?

Look forward to your response and thanks in advance!

Venita

#2

Hello Venita! Nice-looking site by the way, great job!

It’s apparent that the top your page anchors are being hidden behind your fixed navigation bar. One way to “fake” this is to create a blank section above the section you want to link to that is the 79px height of your navigation bar. So, for example, you could add a 79 px high section below the video that appears in the WISE-Dx section, so that the Benefits Title would appear below the fixed nav bar.

It’s kind of hacky, but maybe that will get you where you need to be.

JFly

1 Like
#3

Hi @venitasub

The easiest way to deal with this is to add the right amount of padding to the top of your “features row video” class.

1 Like
#4

Thank you so much for your response. I tried adding a blank section above the “Benefits” section and it still scrolls below and starts from the paragraph :frowning:

#5

I would say adding 90px of padding to the top of your “features row video” class will solve your problem. The id link moves the element with the ID you targeting to the top of the window not the bottom of the nav bar. Using padding to push your content down and out of the way of your nav bar I think is the best bet.

2 Likes
#6

Hi David. I just tried increasing the padding of my video section and it worked!! Thank you soo much!! I really appreciate the help.

1 Like
#7

Yeah, my idea would only work if you applied the anchor link #ID to that new section.

David’s suggestion was definitely easier. Thanks @Davidn

1 Like
#8

Jumping in late on this situation but wouldn’t the best solution (if you have a fixed navbar) be to push the entire body down by increasing it’s top margin equal to the height of the navbar? This way, any anchored sections will meet perfectly to the bottom of your navbar.

#9