Streaming live at 10am (PST)

Persistent navigation link highlighting for current section


#1

I’m designing a site that has several dropdown menu items in the site navigation.
I’m searching the forums to find out how to have one of the dropdowns in the site navigation stay lit when browsing the correlated section of the site.
For example: I’m using a navbar in a symbol, and I’m not sure how to get the “Current Work” dropdown to stay highlighted when browsing the Current Work section of the site.
I am currently using folders for static pages but you shouldn’t NEED to use folders for this sort of navigation feature to work properly.
Solutions?

  1. You could use javascript to detect when the URL is, or something, and highlight the corresponding dropdown element, but that is beyond my capabilities.
  2. You could use different navbar symbols for each section of the site with the corresponding dropdown highlighted, but this is problematic when a client takes over and edits ONE of the navbar symbols expecting the rest of them to be in sync with their edits.

I searched, but have not found anyone talking about this.
Has anyone figure out any non-hacky trickery to get this to work?


#2

@samliew I just saw your posts and replies to people about this sort of topic last night!

I think I came up with an alteration to your ‘find parent active dropdown’ javascript and hoping you can help me with an additional idea.

So, what if we add a script that does a similar thing but instead looks for a dropdown that has an ID of navmessages for example, then add the dropdown-active class to it? Because I can add an ID to each dropdown and be able to turn them active from ALL blog post pages (making the BLOG dropdown as active), for example. It would have to be customized for each section of the site, of course.

So, div#navmessages.w-dropdown becomes div#navmessages.w-dropdown.dropdown-active?

If so I could paste the script as customized for each section in the Custom Code of all CMS Collection Page Templates for each collection (blog entries) as needed or even in Static Page Custom Code areas.

Much thanks in advance. This isn’t critical, and it’s starting to get too advanced for clients, of course, but until @webflow implements a solution for this idea it may just work.
Thanks, Sam, and/or anyone else who is a javascript expert!


#3

A script containing something like this on Blog CMS Collection Page Templates, perhaps?
$("#navmessages").addClass("dropdown-active");


#4

Okay, this worked. After you follow the directions by Sam in the linked article above, do this:

  1. Add an ID to each dropdown that you need to turn on in your navigation.
    #navblog
    #navstories
    #navvideos
    …etc.

Then, essentially, add this custom code to your CMS Collection Page Template and tailor it to target the appropriate navigation dropdown:
<script> $(document).ready(function(){ $("#navmessages").addClass("dropdown-active"); }); </script>

Once done, it should turn on the navigation item you need. Thanks for your help, @samliew and @danieltak and everyone else for your paitence!
image


#5

I’m not sure what I did! And a little unsure of what you were looking for. But I’m glad you got it sorted out!