Style active menu with custom class

Hi there,

Your site is currently under maintenance mode. Can you disable it so we can see?

Thanks!

Doh! Is live now!

So just to make sure, you don't want the white hover color when the it's active?

Instead you want no hover color (just the blue)?

Hi Leo,

No, I want the same button colors as hover. So when the menubutton is active I want the background color white, the border and the letters pink.

Hi there,

Adjust your hover CSS so it looks like this:

.afspraak a:hover,
li[class*="current-menu-"].afspraak > a {
    color: #e6007d!important;
    background-color: #fff!important;
    border: 1px solid #e6007d;
    padding: 10px 20px;
    border-radius: 10px;
}

That should do it :)

Hi Tom,

Still the same and the white background and pink border is now big around the menu item... See the site

Sorry - just made an adjustment. Try now :)

As always, thank you, thank you, thank you!

You're welcome :)

Just want to say thank you Pieter for asking the question and thank you Tom for the answer.

I wanted to have the active state of secondary navigation a different colour for each page it links to, so that it matches the branding of that page, I managed it by adapting the css you provided - each item has it's own class and i applied this CSS. I do get a slight flicker of the active colour on click but otherwise it works perfectly.. You guys have just made me look clever ;-)

/* Change active menu item for each page by using a css class */

.hataxbox a:active,
li[class*="current-menu-"].hataxbox > a {background-color: #96c93e!important;
}

.habudgetbox a:active,
li[class*="current-menu-"].habudgetbox > a {background-color: #911421!important;
}

.hataxingtime a:active,
li[class*="current-menu-"].hataxingtime > a {background-color: #0a5583!important;
}

Hugues

Awesome! Glad this topic was helpful! :)