Return to previous page

Implementing Logo Animation on Website Header for Scroll-Responsive Sizing

This topic has 7 replies, 5 voices, and was last updated 3 months 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

6 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

Bas Kling

Participant

August 18, 2024 at 09:05

I am VERY curious to know which demo too!

#410592 Copied

zaid

Participant

August 18, 2024 at 09:22

same here 🙂
patiently waiting for the update

#410594 Copied

Rose Tyler

Support staff

August 19, 2024 at 08:06

Hello, @Ammarzo,

Please provide the URL of the mentioned demo. Thank you in advance!

Best Regards,
8Theme’s Team

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