[Resolved] Style active menu with custom class

[Pieter]

Hi,

Almost ready to go live with a new website. But one thing I can’t get fixed. I have styled the mainmenu with the hover an active menu’s look like buttons. Now I want the latest menu item (afspraak maken) have a different color also when hover over it. I managed that, but when the menu is active it changes to the active color of the mainmenu. I don’t want that, I want the latest menu has the same style when hover over it.

Thank you in advance

[Leo]

Hi there,

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

Thanks!

[Pieter]

Doh! Is live now!

[Leo]

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)?

[Pieter]

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.

[Tom]

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 🙂

[Pieter]

Hi Tom,

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

[Tom]

Sorry – just made an adjustment. Try now 🙂

[Pieter]

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

[Tom]

You’re welcome 🙂

[Hugues]

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

[Tom]

Awesome! Glad this topic was helpful! 🙂

[Author]

Posts