Return to previous page

How to create zoom animation for menu of my website

This topic has 6 replies, 2 voices, and was last updated 4 months, 1 weeks ago ago by Jack Richardson

fahd

Participant

August 7, 2024 at 13:36

I want to create a menu for my website so that when the page loads, it appears large, and when I scroll down, the size of the menu decreases slightly, as shown in the example below
https://www.intermedasia.com/

#409324 Copied Theme version: 9.3.16

5 Answers

Jack Richardson

Support staff

August 7, 2024 at 15:31

Dear @fahd,

We hope this message finds you well. To implement the feature you are interested in, it is essential to activate the XStore Sticky Header option on your website’s header. This activation will allow you to determine by CSS class when to scale the size of your menu items appropriately. Currently we see you are using the Motion Effects by Elementor that makes your header sticky all time.

For a detailed guide on how to proceed, please visit our documentation at: https://www.8theme.com/documentation/xstore/xstore-builders/new-xstore-header-builder-with-elementor/#features-gwnX12.

Should you require any further assistance, please do not hesitate to contact us.

Best regards,
Jack Richardson
The 8Theme Team

#409362 Copied

fahd

Participant

August 7, 2024 at 18:09

i don’t undrestand any thing .please can you make a exemple video
thank you

#409387 Copied
Jack Richardson

Support staff

August 8, 2024 at 07:52
Dear @fahd,

We hope this message finds you well.

We would like to inform you that we have updated the settings in the Motion Effects section of your website. The previous settings can be viewed here: https://prnt.sc/ZMmIPvMjswBC. These settings have been reset, and we have implemented the sticky header using our XStore options as previously described.

Additionally, we have incorporated the following custom CSS for the Menu element in your header:
```
body:has(.etheme-elementor-header-sticky.sticky-on) selector .elementor-item {
    font-size: 10px;
}
```
We kindly ask you to review the changes at your earliest convenience and let us know if everything meets your expectations.

Best regards,
Jack Richardson
The 8Theme Team
#409455 Copied
fahd

Participant

August 9, 2024 at 18:25

thank you
how can you do some thing with logo?

#409691 Copied
Jack Richardson

Support staff

August 11, 2024 at 09:37
Hello @fahd,
You can use next custom CSS for the logo element:
```
body:has(.etheme-elementor-header-sticky.sticky-on) selector img {
    max-width: 150px;
}
```
Kind regards, Jack Richardson
#409803 Copied
Tagged: create zoom animation wordpress, customize woocommerce animation, menu animation wordpress templates, woocommerce zoom effect, wordpress menu zoom feature, wordpress zoom animation tutorial, zoom animation woocommerce
Viewing 6 results - 1 through 6 (of 6 total)