Navigation Bar highlight

Design help General
1

Read Only Link: https://preview.webflow.com/preview/takestockproject?preview=4d504873b6eb997f0f5ec09e53c137383

Browser type: Google Chrome Version 41.0.2272.89 (64-bit)

Hi,

So within my Navigation Bar I have a home link and then 5 main headings of the separate sections on the page. However there are also sub sections within these 5 which I wish to feature somehow within the navigation bar so that a user can see where they are on the page.

At the moment the links highlight when your on the section you want to be which is great, but I was wondering if there is any way each main links can have a drop down menu to show the sub sections or another way of doing this.

See Below for example:

1280Ɨ800 116 KB

1280Ɨ800 361 KB

Vegan Section is highlighted, but the Vegan views section below it does not feature in the Nav Bar and I want it to within the Vegan link somehow?

Thanks.

Kate

2

Hi @Kate_Jennings, thanks a lot for your post. If you are using the the built in Nav Menu, you can use the ā€œCurrentā€ class for a section, to update the styles for the nav links to show a highlight. I was going to check your site, but it seems the read-only link is no longer active, could you go back to the share button, and toggle the read-only status to green (enabled) and then let me know, and I can go look how the sections are setup currently, and what need to be updated :slight_smile: Cheers, Dave

3

Read Only:
https://preview.webflow.com/preview/takestock?preview=80bac3e131201918fd2c92ba871a65cf

There is the new read only link, I hope that works.

Thanks for your reply. Look forward to hearing from you shortly.
Best,

Kate

4

Hi Dave

Iā€™m also having the same issue. I already have the ā€˜Currentā€™ class for the ā€˜Aboutā€™ link in the nav bar. I also add a class ā€˜Currentā€™ for the ā€˜Aboutā€™ section of the site, but the navbar link does not change colour when I scroll to ā€˜Aboutā€™ section.

Do I need to change/add any setting for the section or for the link, for the navbar ā€˜Aboutā€™ link to highlight when Iā€™m at ā€˜Aboutā€™ section on the site? Thanks

5

Hi @Edgar, thanks for your post, could you share the read-only link to your site? Share a read-only link | Webflow University I can check out the Nav :slight_smile:

@Kate_Jennings, sorry that your link got missed, are you still having any issues with the current class on the nav link?

Cheers,
Dave

6

I would like to not share it publicly at the moment as the product is not live yet. Could you just indicate where should I check? thanks

7

Hi @Edgar, the read-only link really helps to troubleshoot issues, I would recommend to create small test case sites if possible, when you need to figure out why something is not behaving normally :smile:

I would first check that your sections you are linking to, all have unique IDs set in the settings panel. Next I would check that the section links on each nav link are pointed to the correct sections.

Next, scroll to teach section, select the section with your mouse, and then select the Nav link that points to that section. If you now click on the Styles tab, the Nav Link should have the current class, and you can change the link colors and hover colors etc for the current class.

ā€‹I hope this helps. If not, please let me know ā€“ Iā€™m happy to assist further! :slight_smile:

Cheers,
Dave

8

Sorry for the late reply, but it worked!

Thank you very much for your help Dave!

1 Like