Reply To: Logo Hover

Home Forums Support Logo Hover Reply To: Logo Hover

Home Forums Support Logo Hover Reply To: Logo Hover

#83213
Tom
Lead Developer
Lead Developer

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 5 years, 10 months ago by Tom.