Return to previous page

Implementing Logo Animation on Website Header for Scroll-Responsive Sizing

This topic has 4 replies, 3 voices, and was last updated 10 months, 1 weeks ago ago by Rose Tyler

Ammarzo

Participant

July 4, 2023 at 07:21

Hello support team,

I am reaching out regarding my website, I would like to implement a header logo animation similar to the one on this website (https://www.gucci.com/us/en/). As you can see, the logo starts off large but shrinks to a normal size when the user scrolls down. I would like to achieve the same effect for the logo on my site. I tried myself but couldn’t figure it out.

Thank you for your assistance.

Please, contact administrator
for this information.

#361147 Copied Theme version: 9.1.8 WooCommerce version: 7.8.2

3 Answers
Tony Rodriguez

Support staff

July 4, 2023 at 08:20
Hello, @Ammarzo,

Thank you for choosing XStore as your WooCommerce WordPress theme.

Unfortunately, there is no such animation in the theme at this time. However, the following code can be used to change the size of the logo for the sticky header. please copy and paste the following CSS code into XStore >> Theme Options >> Theme Custom CSS >> Global CSS and then clear your browser cache to view the changes:
```
.sticky-on .et_b_header-logo img {
    max-width: 100px !important;
}
```
If further customization is required, we recommend submitting a customization request to the Codeable team via their website: https://www.codeable.io/?ref=qGTdX.

Alternatively, you can post your request on our Taskboard at https://www.8theme.com/taskboard/. If it receives enough votes from other customers, our development team will consider adding it in one of the upcoming updates.

Best Regards,
8Theme’s Team
#361155 Copied
Ammarzo

Participant

July 4, 2023 at 08:28

You already have this feature on a different demo theme, but not on the one which I have chosen, I guess its possible through some basic settings and CSS code. Please I want the changes to be done

#361156 Copied

Rose Tyler

Support staff

July 4, 2023 at 14:45

Hello, @Ammarzo,

Thank you for your response.

Please provide the URL of the mentioned demo.

Best Regards,
8Theme’s Team

#361196 Copied
Tagged: implementing, logo animation, scroll-responsive sizing, templates, website header, wordpress woocommerce
Viewing 4 results - 1 through 4 (of 4 total)