[Resolved] Style active menu with custom class

Home Forums Support Style active menu with custom class

This topic contains 11 replies, has 4 voices, and was last updated by  Tom 5 months, 2 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #443874



    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

    GeneratePress 2.0

    Leo Customer Support

    Hi there,

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




    Doh! Is live now!


    Leo Customer Support

    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.


    Tom Lead Developer

    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


    Tom Lead Developer

    Sorry – just made an adjustment. Try now 🙂



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


    Tom Lead Developer


    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;



    Tom Lead Developer

    Awesome! Glad this topic was helpful! 🙂

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.