Erratic behavior with navigation using section IDs

I’ve designed a sub-navigation system using section IDs that is producing some very erratic behavior.

I’ve made a 2-minute video demonstrating the issue here: https://www.loom.com/share/94878e4bca514a1c93a0b52ef059fa21

If anyone can explain to me what is causing the behavior, and how I might correct it, I would really appreciate your help.

Thanks very much in advance!


Here is my site Read-Only: https://preview.webflow.com/preview/chuckbraman?utm_medium=preview_link&utm_source=designer&utm_content=chuckbraman&preview=61d59a35585180f1e37a292d977edd9a&pageId=5e06b215be0f8238107184c9&mode=preview

Hi

I think it happens because the sections are too close. It doesn’t make sense to create navigation system to content that seats so close to each other. take a look at the video below :slight_smile:

https://www.loom.com/share/5b1b3732f9fe47fb9c14a1178c3c2b7a

1 Like

Hi @Chuck_Braman, thanks for your post. I took a look and it does not appear that you are using Sections for linking but div blocks, there is a difference.

For section linking to work best, the sections should be placed directly under the body element in a natural document flow where Sections are placed under the body, divs are placed under sections. You can use anchor links to other elements using the ID, but the scrolling is more predictable when linking to sections under the body.

There are also other caveats to section linking and smooth scrolling in relation to Fixed nav menus: Getting Webflow's smooth scroll script to align correctly with fixed headers/navigation

When using fixed nav menus, the disable scroll offset in the menu should be checked and the first section after the nav menu (the top of your page, the first section) should be set as a header in the Type dropdown in element settings.

If you are using top or bottom margins between divs you are linking to, you made need to add the occasional margin offset somewhere, I actually recommend to use as little margin as possible, I try to never use margins but use padding instead so that all elements that are aligned vertically on the page in a normal dom layout have no vertical whitespace between elements.

p.s. you can tell if you are using a div block or section from element settings:

I hope this helps.

1 Like

@cyberdave,

Thank you very much for taking the time to analyze this and provide such excellent, detailed advice. I haven’t had a chance to implement your advice yet—I’m preparing to leave for a vacation tomorrow, so it may have to wait until I return—but I strongly suspect it will solve the issue.

@shokoaviv

Thank you very much for taking the time to analyze my problem and for the advice regarding the issue.

Your video is helpful too; not necessarily regarding this issue, but it makes it indicates to me that an aspect of my design may be unclear to others and need to be rethought.