[Resolved] Logo Hover

[Sophia Monago]

Is there a way to change logo image when hovering just like title hover and link hover.

[Tom]

Hi Sophia,

Are you wanting to change the logo image to a different image on hover?

It’s possible, but would involve using GP Hooks.

I can provide some code if you’re interested 🙂

[Sophia]

Yes!. I would love that. :). Thank you!.

[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 7 years, 8 months ago by Tom.

[Mo]

Hi Tom,
After a bit of searching here, I found that Sophia asked the question I’d been seeking an answwer to.

Didn’t see a GP Hooks area named “Inside Header Content” so I took a guess and added the HTML to Before Header Content.

It worked perfectly for initial placement of the regular state, however, on the mouseover, the hover-state image appears aligned below the regular state image, shifted exactly the height of the image.
In this case 200px.

Tried applying different position elements but the only thing that was partially successful was using a negative margin-top value.

There’s probably a much more elegant way to achieve the desired result.

I’m just happy to have found the solution to the issue of getting the header images to appear.
That being, how to overide the Customizer.

Now it’s only a matter of getting them to appear in perfect alignment.

Header hover image

Mobile displays the opposite results.

The hover state image appears about half the height of the regular state image but above it.

If it’s of any use, the images are both w=600px x h=200px.

Your IP has been whitelisted in Wordfence after one of your intial visits was blocked.

Thanks,
Mo

[Mo]

Well, cleaaring the cache must’ve been delayed because the regular state image and hover state image now line up in Firefox, Chrome and IE.

Weird.

Still a shift in mobile (media max-width: 768px) with the hover state shifting about 60px or so above the regular state.

Just started working on this today so the logo size isn’t set at 600×200.
May go to 450×150.

Might end up making the logo into a rollover.
Haven’t decided.

[Mo]

You are aware of this.
The smaller the screen the worse the shift on the hover state image.

[Tom]

Hi Mo,

You’re missing the logo-regular-state class on the first image:

<img src="URL TO YOUR LOGO" alt="" class="logo-regular-state" />

Let me know if that fixes it or not 🙂

[Mo]

As usual, you’ve resolved the issue.
Works as it should in mobile as well.

Thank you.

[Tom]

You’re welcome 🙂

[Mo]

One odd bit of behavior now and it only seems to occur in Firefox.
I disabled all addons just to make certain they weren’t the cause.
Made no difference.

When hovering the cursor over the main navbar, on any parent button, occassionally the hover state logo in the header will appear directly below the regular state logo.

Does not happen every time.

If you move the cursor between the Homepage button and the header image area repeatedly this eventually triggers the behavior.

There have also been instances where I taken a break from the page and upon returning the both the regular state and hover state logos are fully expanded one on top of the other.

Refreshing the page returns it to normal.

Cannot duplicate it in Chrome or IE.
Firefox quirk?

Homepage header logo

Your IP has been whitelisted in the “Under Construction” plugin.
Let me know if you can’t access it.

Thanks

[Tom]

Hmm, try the updated CSS above: https://generatepress.com/forums/topic/logo-hover/#post-83213

[Mo]

Where you indicate to place the code in “Inside Header Content”.
I don’t see that section in GP Hooks.

I’ve placed the HTML is placed in “Before Header Content”.

It actually doesn’t matter where the block of code is placed as it was tried in the 4 header sections
The same odd behavior occurred.

What seems to have worked is a lot of trial and error in the CSS.
I found the class in the GP parent theme and added this to the Child:

.site-logo {
	display: block;
}

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

When the display properties were both inline-block, the hover state logo would occasionally appear below the regular state logo by the 200px height of the regular state image.

Making the display values different stopped it.
This might be considered a rough hack, as my CSS knowledge is basic.

Since adding it, I’ve been trying to “break” the logo but it seems atable.
Works in the 3 browsers and looks fine in mobile.

Perhaps you’ll know why this is working.

[Tom]

Not really sure why it’s working, but I wouldn’t call it hacky – that’s great that it’s working 🙂

[Rui]

Hi!

How can I make a “soft” logo zoom out (on hover), like the logo at left on this site: http://www.planetary.org/ ?

[Author]

Posts