Reply To: Logo Hover

[Tom]

So basically, you would remove the logo set in the Customizer.

Then, in the “Inside Header Content” area of GP Hooks, you would add something like this:

<div class="site-logo">
      <a href="URL TO CLICK THROUGH TO" class="hover-logos">
            <img src="URL TO YOUR LOGO" alt="" class="logo-regular-state" />
            <img src="URL TO YOUR HOVER LOGO" alt="" class="logo-hover-state" />
      </a>
</div>

Then you would add this CSS:

.logo-hover-state {
      display: none;
}

.site-logo:hover .logo-regular-state {
      display: none;
}

.site-logo:hover .logo-hover-state {
      display: block;
}

In theory, that should do it. Untested, so it may need some tweaking 🙂

• This reply was modified 8 years, 1 month ago by Tom.