Animate logo with a custom class using AnimateIt

Forgot to add the URL. Added now. Thanks.

Hi there,

you can use the generate_logo_attributes filter hook. Heres an example PHP Snippet for adding a class to the logo:

add_filter( 'generate_logo_attributes', function( $attr ) {
  $attr['class'] .= ' your-custom-class';

  return $attr;
} );

Just swap out the your-custom-class for what you need, make sure to keep the space before the class name.

Hi David,

Thank you for that. Would/Should I be creating a new element hook then to put that into?

When I search in the hook type, generate_logo_attributes does not seem to be there?

Kind regards,
James

Sorry i should have explained, that code is using a Filter Hook, you will need to add them using one of the methods described here:

https://docs.generatepress.com/article/adding-php/

TLDR: Are you using a Child Theme?
If Yes - add the snippet to your Child Theme > functions.php
If No - install the Code Snippets plugin and a Add New Snippet to add the code to.

No need to apologise at all David! That worked a treat (using code snippets plugin). And I have learned something new today, so thank you! :)

Have a good day!

Hi again,

Apologies to reopen - but just tested and works fine on the home page, but all other pages its static.

I have the code snippet to run everywhere.

Also, is there anyway to apply this to the sticky nav that appears when scrolling up please?

Thanks

Quick question - what type of animation you adding to the logo ? Is it just a 'grow' on hover?

Yeah basically :)

How about just using some CSS?

.is-logo-image:not(:hover) {
    transform: scale(1);
    transition: transform 0.3s ease-in;
}
.is-logo-image:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease-in;
}

adjust the transform: scale(1.2); property in the second rule to change the scale.

And both rules have the transition: transform 0.3s ease-in; - adjust the 0.3s for the timing on mouse over

Ahh that is perfect and works everywhere!

Thank you very much David! Have a great day! :)

Glad to be of help!!