having a flip animation on the genesis logo

[glenkg]

Hi,

I was wondering if I can put a flip animation on the genesis logo (the logo that you can choose under customizer within WordPress.

This is the effect I would like to add if possible.. https://davidwalsh.name/demo/css-flip.php

The code was also given with it here: https://davidwalsh.name/css-flip

Now, I am not very good with the "how" and the "where", but I think the html has to be added to the header.php file, right?

div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content -->
		</div>
		<div class="back">
			<!-- back content -->
		</div>
	</div>
</div>

I think the "flip-container" has to be changed in "custom-logo"? So where and how do I add this? in the function.php or the (copied version in the child theme of the header.php?

Maybe one of you know and is willing to send me in the right direction with this, because I can't seem to figure it out.

Thanks,

Kevin

[Victor Font]

It's a little more complicated than it may seem. Logos in Genesis themes are added as background images to a link element. A background image does not respond to a hover effect. You have to move the image to the foreground and wrap it in a link. The only way to do this is writing custom code.

This will get you started in the right direction: https://victorfont.com/genesis-seo-schema-site-logo/

This has not been tested with Genesis 2.5 and it may need some tweaking. Good luck!

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts