Hi there good people around the world!

Im trying to design an Elementor Header With some custom CSS.. Im trying to change the height of the space between my header and the header full width mobile nav menu (the one that pops out after clicking the Toggle Icon) according to the scroll position.

so.. my header have a shrink effect whice reduces the header hight once the user start scrolling. The result is once the user is at the top of the page and opens the menu on mobile, everything looks fine because there is a 43PX Top Margin.

The problem is begin once the user starts scrolling, The 43PX of space is still the same but the header is actually a bit less higher Which leaves unnecessary space.. How can I change this space based on the user's scroll position from 43PX to 20PX

What iv'e been trying is this.. but unfertantly it's didnt work

.elementor-3620 .elementor-element.elementor-element-d4a11a9 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-3620 .elementor-element.elementor-element-d4a11a9 .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    margin-top: 45px!important;

.she-header .elementor-3620 .elementor-element.elementor-element-d4a11a9 .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-nav-menu--dropdown, .elementor-3620 .elementor-element.elementor-element-d4a11a9 .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    margin-top: 20px!important;

it's looks like this right now >> this one is with 43px whice is fine and should stay this way

this one have a 43px as well and shouild be changing to 20px once the user is scrolling

Thank you very much guys! <3

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.