Basic wordpress menu in header. Header container has custom css. It refers to the child menu’s background and shadow. The header container is set to sticky top (Advanced -> Motion Effects). Under this section the amount of scroll needed before triggering is also specified. Then finally in the custom css it refers to the .elementor-sticky–effects class which is active when the scroll amount is reached. The regular selector has the transition to transition back when scrolling to the top. And the scrolling down transition is defined under the elementor sticky effects selector. (PS: The Header Container is also set to a high Z-index of 1000 so it’s always on top and using scroll snap under page settings breaks the .elementor-sticky–effects by preventing it from triggering)