Navigaton States

[Sean_Egan]

Hi All,

I’m creating a site with multiple pages and having trouble with defining the ‘Current’ link on navigation - I searched the university etc but can’t find anything on it?

I’m not sure what I’m doing wrong, here’s what I’ve done:

1. designed and created a page called ‘services’ (various links on this page to the services available from the folder below)
2. created a folder called ‘service listing’
3. Added a new page for each service in the ‘service listing’ folder

So on my main menu, I have the link to the services page but I would like the navigation to be current when the user is in one of the pages within the ‘service listing’ folder?

Any advise/help on what I’m doing wrong or a better way to do it would be much appreciated.

Thanks in advance.

[webdev (Jeff Selser)]

@Sean_Egan, please provide a read-only link to your project, and a published URL to the webflow.io project. Those are essential when posting to “Bugs”. Thanks.

[Sean_Egan]

@webdev, sorry forgot to add one the last. I’m not 100% sure whether it’s a bug or not, happy to relocate it if you think there’s somewhere more appropriate.

Here’s the link to another project I’m having the same issue:
https://preview.webflow.com/preview/undergraduate-digital-open-day?utm_source=undergraduate-digital-open-day&preview=4c874feca0441c3c2722ef10650d180d&mode=preview
…and a preview of the latest published version (and the specific page)
https://undergraduate-digital-open-day.webflow.io/course-discipline-areas/school-of-business-humanities/accounting-and-finance

I have a page for each course and want the navigation to have ‘Courses’ as current when these are being viewed?

Any help would be greatly appreciated.

Thanks.

[Brando (Brandon Roche)]

Hi @Sean_Egan

Thanks for posting and great question.

This wouldn’t be considered a bug as much as it is a limitation of the current state. The current state for links is only available based on page or page section, but not based on folder.

However, I do thin there’s a way around this. Instead of setting a current state on these pages, you can simply add a combo class to that nav link on the courses pages and edit the styles as needed. There’s one caveat though — you’d need to unlink the symbol on these pages or create a second symbol that has that link already styled.

I hope this helps! Also if you’d like to see a folder-based current state in Webflow, please feel free to post about it in our Wishlist: http://wishlist.webflow.com

[Sean_Egan]

Thanks for the response @Brando, the combo classes and duplication of the symbol worked a treat! Thanks a million.

[Diarmuid_Sexton]

Or you can use this piece of jquery

$('.dropdown:has(.w--current)').addClass('show-highlight');

where the classes are as follows

you will then need to create a combo class for dropdown called show-highlight and style this as desired to show the current state. you can then remove the combo class and publish and it should work.

one thing to note is that when you then delete the show-highlight combo class - if you then go and clean unused classes, it will get deleted. so, I normally make a nav link with that combo class and then add another class to it and then hide it from the nav menu so that the show-highlight combo class never gets deleted.

hope that makes sense.

let me know if you’ve any issues.