- This topic has 7 replies, 4 voices, and was last updated 4 years, 1 month ago by Tom.
-
AuthorPosts
-
March 17, 2020 at 5:28 pm #1197871George
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?
March 17, 2020 at 5:32 pm #1197874LeoStaffCustomer SupportHi there,
Would this filter help?
https://docs.generatepress.com/article/generate_logo_output/March 17, 2020 at 5:54 pm #1197886GeorgeHmmm. 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?
March 18, 2020 at 4:43 am #1198223DavidStaffCustomer SupportHi 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.March 18, 2020 at 9:28 am #1198662GeorgeHi 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?
March 18, 2020 at 4:08 pm #1198936TomLead DeveloperLead DeveloperYou 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.
March 18, 2020 at 5:41 pm #1198972GeorgeMaybe 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!
March 19, 2020 at 9:20 am #1199711TomLead DeveloperLead DeveloperYou’re welcome 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.