Streaming live at 10am (PST)

Current class on on the actual dropdown toggle - revisited


#1

Continuing the discussion from Current class on on the actual dropdown toggle button in navbar?:

I’ve added this custom code side-wide. Please, what else do we do?

Still looking for a solution for the dropdown navigation link to be active when on a child page.

https://preview.webflow.com/preview/wireframe-nbpt-docu-fest?preview=c5666b04d5113279b3e9eb51e4ef894e

http://wireframe-nbpt-docu-fest.webflow.io/participate/sponsor

As a Webflow user, it would be nice to select “dropdown navigation link” and give it an active state.

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


How do style 'current' nav link on CMS pages
#2

I had some problems with the initial script and had a friend updated it a bit:

<!-- Navbar Dropdown selected -->
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('.w-dropdown').each(function() {
    var hasActiveLink = $(this).find('.w--current').length > 0;
    if (hasActiveLink)
    {
	$(this).find('.w-dropdown-toggle').addClass('dropdown-active');
    }
  });
});
</script>

Add the script above to custom code. Then make a class on the dropdown toggle element used in the nav bar that is named ‘dropdown-active’ and style it to look like a the ‘current nav link’. Then remove the class (but do not delete it). Mave a new class on the dropdown toggle element that looks like a normal nav link. The script above will automatically replace the ‘dropdown’ class with ‘dropdown-active’ class when a nav link inside the dropdown is selected. Hope this helps :slight_smile:


#3

Thank you very much. I think I followed your instructions but I still don’t see “films” dropdown active while on one of it’s child pages.

http://wireframe-nbpt-docu-fest.webflow.io/films/schedule

https://preview.webflow.com/preview/wireframe-nbpt-docu-fest?preview=c5666b04d5113279b3e9eb51e4ef894e

I’m I missing something? Thank you so much for your help. This has been bugging me that my sites don’t do this.


#4

Strange, that should work. Can you post a print screen of the script in custom code?


#5

Thank you!


#6

Hi @Christoffer any ideas on what next? I rechecked the CSS and I think I followed the instructions. Thank you!


#7

As far as I can see you have the same script and correct class names. Note that the script do not work in preview inside the designer. Have you published the site after the script was added?


#8

Thanks for looking into. I just published it to double check: http://wireframe-nbpt-docu-fest.webflow.io/


#9

Beyond me! Perhaps one of the community experts have an idea? @samliew helped me with the original script.


#10

@Christoffer By the way, the Webflow community experts are listed here, under moderators, if you still need help https://forum.webflow.com/about

You can also find me using this form if you don’t see me on this forum.


#11

Thanks guys. Any help here to get this working would be great. It’s a bummer not to have nav items showing active when you are in it’s section/folder.


#12

Hi @samliew I’ll keep you in mind for a webflow developer. I work on a lot of projects. If you know why we can’t get the drop down link to look active, I’d owe you one!