[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
    Posts
  • #443874

    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

    GeneratePress 2.0
    #444039

    Leo Customer Support

    Hi there,

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

    Thanks!

    #444100

    Pieter

    Doh! Is live now!

    #444169

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

    #444229

    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.

    #444328

    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 🙂

    #444340

    Pieter

    Hi Tom,

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

    #444348

    Tom Lead Developer

    Sorry – just made an adjustment. Try now 🙂

    #444350

    Pieter

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

    #444359

    Tom Lead Developer
    #565525

    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

    #565877

    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.