Before you ask please READ THIS

How do I get the logo to change color when I hover over the header menu bar?

in Rife Posts: 2
Is there a way to have a company logo change colors when someone hovers over the header menu? The header background on the site I am building is currently transparent. When someone hovers over the menu, I want the background to turn white and our white logo to turn to its normal colors.

I have included a link to a different site that does this so you can see what I am trying to do. The white Bain logo turns red when you hover on the the menu ( I do not see an option for this on Rife Pro. Thanks!


  • AirAir
    Posts: 10,703
    Welcome :-)

    So what we need from you is:
    1. For a start I will need a live link to your website, so I could check what is your current situation, and what can we use to achieve what you need.
    You are probably using some header color variant, and I need to determine which one.

    With kind regards.
  • The site is still in development, but you can view it here: I have turned off variant because it washes out the white logo when you hover over it. I can turn it back on so you can see the issue.
  • AirAir
    Posts: 10,703
    OK, great! If you are not using header variant it is even better here, as you can go to
    Appearance → Customize → Header Settings → Type, variant, background → Background color - on hover and set it to your desired color.

    Next about the logo switch, we can add such custom CSS:
    #header:hover .logo.normal-logo {
        background-image: url(;
    Please implement these changes and check the result.

    If you need to change links as well, you can use this custom CSS:
    #header:hover .top-menu li a, #header:hover  .top-menu li span.title,
    #header:hover .top-menu i.sub-mark {
        color: #000;
    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!