How to create zoom animation for menu of my website

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

  • Avatar: fahd
    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/

    5 Answers
    Avatar: Jack Richardson
    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

    Avatar: fahd
    fahd
    Participant
    August 7, 2024 at 18:09

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

    Avatar: Jack Richardson
    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

    Avatar: fahd
    fahd
    Participant
    August 9, 2024 at 18:25

    thank you
    how can you do some thing with logo?

    Avatar: Jack Richardson
    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

  • Viewing 6 results - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.Log in/Sign up

8theme customization service
We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.