Link to section scrolls too far down

Design help Layout & Design
1

I know it has something to do with my top navigation but I am not sure how to fix this.

Here is a page where you can see how it goes down too far - Glossary

Here is my read-only link - Webflow - Midway ISD

Thank you

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

1 Like
2

Hey @icanCreate, in this case, I would add an visibly hidden element with absolute position on top of each section. It can have 0 width and height = to height of your nav. Then anchor the buttons to that element instead.

3

I added an empty div above the div where I want it to go. I gave the empty div a height and link to that div id but it still does not work. If I move that empty div up a few sections it works.

Thanks for the help.

4

Hey Robert, your site is unpublished so I can’t see it, and I don’t know what problem you’re having. However one issue I see frequently is when the sticky nav overlaps a scroll-to section too much.

The approach I use to overcome that depends on the situation, but the basic idea is to set the top margin of the section to a negative amount, say -200px, and then use the top padding to compensate for that with e.g. +200px.

Here’s some detail on how to deal with buttons- above, and styled section backgrounds;

2 Likes
6

The site is published now if that helps. Thank you

1 Like
7

Yep, I guessed right- the technique I described above solves your problem.
I’ve added a video there too, of your specific example to walk you through it.

8

This is great! Thank you for your help.

1 Like
9

If that worked for you please mark that answer as the solution so people can find it. Thanks!

10

Thanks for this trick ! Works perfectly !

1 Like
11

If the designer impact of the overlapping sections creates problems for you, I use a different technique now, which is more like this;

/* Apply to all elements that have an ID */
<style>
*[id] {
  scroll-margin-top: 100px; /* Adjust this value as needed */
}
</style>

If you drop this as a custom HTML embed in your page, it will set a top margin for the scroll-to position. It works in 90% of cases, so test it for yours, and use the other as a fallback.

1 Like
12

Thank you this helped!

1 Like
13

Really nice solution !!!

In my case, I also had to ‘play’ with the previous section and the opacity at 99 because I had different backgrounds colors between the sections and, in one case, an image that already had a negative margin. For those of you in the same situation. You need to change the opacity of the previous object to 99