[SOLVED] Vertical Nav, Not Quite Right

Design help General
1

Alright, so I’m trying to make a vertical nav bar.
The ones with the dots at the side, which links to different sections on the page. Yes, those.

Made one here: https://preview.webflow.com/preview/vertnav?preview=ca19a4777bfa37f3a2f2358cc02a0643

Scrolling down, the dot changes state (as it should) to the respective section. Looks good.

Here’s my issue.

If the third dot is selected (to go to the third section), it would only navigate to the second section. Likewise, for the fourth, it’ll only go to the third section, and so on; selecting the first or second dot would go to the first section.

Looking around, it seems like in @vincent’s example, the same issue also presents itself.

Is this a bug? Or am I missing something?
Appreciate any help.

1 Like
2

Could you check your read-only link, pls. Because now it gives 404 page.

3

Didn’t realize that publishing would disable preview links. Fixed now.

4

Hmm, really weird… And this bug came ONLY when navbar is vertical. When I change same navbar to horizontal it works right.

Will hope @PixelGeek and @cyberdave can explain or fix it.

5

Thanks @sabanna!

You’re right. So this is rather baffling to me.

6

Could this issue be related?

7

Maybe. It is definitely something inside the program.

8

Hey,

There definitely seems to be a bug there. As a work around I found that putting your nav in a div and apply the fixed positioning to the new div solved the problem. You should be able to adjust the relative positioning of the nav without effecting the functionality.

2 Likes
9

Don’t know if it is the actual reason but it seems to be an offset issue so the link drags you to the top of the section. If you disable the scroll offset in the menu settings it scrolls to the actual section you are linking to.

242×753 44.5 KB

1 Like
10

Hi @Reply, I would create a section on to your page, under the body, and then give it a class of Nav. Drag your existing navbar into the section.

476×914 45.1 KB

Next select the new section you created, and go to settings and change the Tag to Nav:

482×614 41 KB

Try and see if the vertical nav now works correctly :slight_smile: Cheers, Dave

2 Likes
11

Perfect! This solution and @AlexN solution solves the issue (basically wrapping the Nav Bar).
This still seems like a workaround rather than a proper fix.

Nonetheless, this is here for posterity.

12

Hi @Reply, this is by design to work this way, it seems your navigation falls into the criteria for using a nav header:

​I hope this helps. If not, please let me know – I’m happy to assist further! :slight_smile:

Cheers,
Dave

1 Like
13

Ah, got it!

Thanks @cyberdave!

14

@Reply, This can probably be made clearer, sorry that there was confusion on this :-/ Cheers, Dave

2 Likes
15

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