Logo animation on site title hover

[George]

I want to create a slide animation to animate the logo when hovering over the site title. I have created the animation but I can’t target the logo to animate once the site title is being hovered. I think it’s because this can only happen if the site title is after the logo on the HTML markup. Is there a way to change the markup order somehow, maybe through Flexbox CSS?

[Leo]

Hi there,

Would this filter help?
https://docs.generatepress.com/article/generate_logo_output/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[George]

Hmmm. I don’t know, I don’t think so since this is for the logo output only.

Let me try and explain more. The theme generates the following code for logo and site title:

<div class="site-branding-container">
	<div class="site-logo">
		<a href="http://mysite.com/" title="site name" rel="home">
			<img class="header-image" alt="interface" src="http://mysite.com/wp-content/uploads/2020/02/back.svg" title="site name">
		</a>
	</div>
	<div class="site-branding">
		<p class="main-title" itemprop="headline">
			<a href="http://mysite.com/" rel="home">site name
			</a>
		</p>			
	</div>
</div>

and I am using the following CSS:

.site-logo:hover + .site-branding p { transform: translateX(20px);}

.site-branding p {
	transition: all 0.2s ease-out;
}

The logo is on the left of the site title and on the HTML markup the logo precedes the site title so I can only target the logo on hover and apply the animation to the site title. What I want to do is target the site title on hover so that the logo animates. If I was to change the markup order in any way, the site title would be on the left side and the logo just next to it on the right and wouldn’t look as intended.

That’s why I was wondering if there was a way to “trick” the browser that the site logo comes second semantically but not in reality, if you know what I mean. Unless there is an easier way?

[David]

Hi there,

Can you uncheck Place logo next to title the Site Title will now be before your logo and .site-branding + .site-logo will now apply.

As the + adjacent sibling combinator only applies to the actual HTML DOM order. You can use CSS to re-order them and it will still apply.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[George]

Hi David.

I want to have Place logo next to title checked because I need the logo next to the title as it is. If I uncheck it, what’s the best way to reorder them?

[Tom]

You might be able to re-order them using flexbox/order, but it may not be ideal.

Maybe you could target the hover of an element higher up in the DOM? Otherwise, javascript might be worth trying.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[George]

Maybe you could target the hover of an element higher up in the DOM?

Excellent idea! I targeted the .site-branding-container class. Works great!

.site-branding-container:hover > .site-logo { 
	transform: translateX(14px);
}

.site-logo {
	transition: all 0.2s ease-out;
}

Thanks again, Tom!

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts