How to style "current" state of the dropdown toggle?

Design help General
1

Hi,

I want to style the “current” state of the dropdown parent link in the navbar when I’m on the subpage of the dropdown toggle. I’ve read all the posts on this topic and tried to follow embedding the javascript codes written by @samliew (Current class on on the actual dropdown toggle button in navbar?) but couldn’t make it work.

webflow forum_01 webflow forum_02

I would really appreciate if anyone can solve this issue :slight_smile:

Thanks,

read-only link:
https://preview.webflow.com/preview/marine-innovation?utm_medium=preview_link&utm_source=designer&utm_content=marine-innovation&preview=f163a321a1bada231b6b5ed707b58e1f&mode=preview

2

Hi

I just add a little CSS to override the default Webflow color such as:

/* override light blue default current drop-down state with dark red (WCAG 170420) */
.w-dropdown-link.w–current {
color: #9c0000;
}

So as the remark above says the light blue will change to dark red if this is added.

Hope this helps :grinning:

3

@pnewest,
Thanks for your reply. As I understand it, there is no current state in drop-down toggle? in that case will .w-current{color: #9c0000;} work?

Thanks :slight_smile:

4

Hi @hpark,

w-dropdown-link.w–current is set in webflow.css and referred in webflow.js so doesn’t look like it could be changed within Webflow UI. We export our sites and add an extra css file so can override some default CSS (hence my CSS). We had to change the current state as the Webflow default does not meet WCAG 2.1 AA colour contrast and, as all Public Body sites in the UK have to meet this accessibility level, and all our sites are Public Body, we have to meet this.

If you do not export code, so have not control over the style sheet files, you could add to the Custom Code for page inside the tag for the page, or for the whole site use Site > Settings > Custom code :

<style>
.w-dropdown-link.w–current {
color: #9c0000;
}
</style>

or even

<style>
.w-dropdown-link.w–current {
color: #9c0000 !important;
}
</style>

(As the !important should override previous setting).

Obviously you can add your own colour or different styles such as font, font size, bold etc.

Give it a go, you can always remove it!

Hope this helps :slight_smile:

3 Likes
5

I am very thin with CSS and custom coding so it is little hard to follow but I will try your suggestion and see if it does the work!

I really appreciate your time and effort :slight_smile: