Menu logo swap on hover

Hi there, not support, just seen this question a few times and i’ve got a purely CSS solution.

I wanted to change the colour of the logo in the menu item on hover. Heres the CSS below, i’m still using the x@2 logo so it displays on retina correctly.

My setup is simple, my first menu item is a PNG x@2 size with custom class tag so i can just target that as I have another img in the same menu.

/* ---- Max Mega Menu logo hover  ---- */

.CUSTOM-MENU-CLASS .mega-menu-logo:hover {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url(NEW LOGO URL HERE, USE THE SAME SIZE AS ORIGINAL) no-repeat;
    width: LOGO WIDTH HERE !important;
    height: LOGO HEIGHT HERE !important;
    padding-left: MATCH LOGO WIDTH HERE;
    background-size: contain;
}

And I have same logo in a toggle block in the mobile menu options in the menu theme (You might need to check the class and ID tags for your own.)

.CUSTOM-MENU-CLASS  #mega-menu-wrap-mobile_navigation .mega-menu-toggle .mega-toggle-block-1 a.mega-menu-logo img.mega-menu-logo:hover {
    background-size: contain;
    padding-left: MATCH ABOVE;
    margin-top: YOU MIGHT NEED TO ADD -+PX HERE;
}

https://springpark.segmantdesign.co.uk

• This topic was modified 6 years, 1 month ago by segmant.
• This topic was modified 6 years, 1 month ago by segmant.