- This topic has 7 replies, 4 voices, and was last updated 1 year ago by
Tom.
-
AuthorPosts
-
March 17, 2020 at 5:28 pm #1197871
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?
March 17, 2020 at 5:32 pm #1197874Leo
StaffCustomer SupportHi 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/March 17, 2020 at 5:54 pm #1197886George
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?
March 18, 2020 at 4:43 am #1198223David
StaffCustomer 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 18, 2020 at 9:28 am #1198662George
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?
March 18, 2020 at 4:08 pm #1198936Tom
Lead 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMarch 18, 2020 at 5:41 pm #1198972George
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!
March 19, 2020 at 9:20 am #1199711Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.