Credits :Elementor
tips and tricks sometimes you don’t want a plain old static header in this video you’ll learn how to make your head or stand out more with some animation now it’s possible to determine how the sticky feature behaves when users scroll that means you cannot effects and animation to make your header much more stylish but first subscribed to a YouTube channel for more videos to take your skills to the next level first setup your sticky header in the elementary editor in your header click on the section in the panel go to Advanced in open the swirling effect juice sticky top or bottom I need top select the devices you need desktop mobile etcetera

go to offset give me to move the header or any other sticky element up or down in pixels the opposite effect lets you determine when the effects of changes will occur according to the scrolling distance and pixels let’s set it to 100 pixels but you won’t see anything yet first we need to add CSS in the CSS tab will add a new CSS class that affects the elementary sticky the class name is effects so let’s add some CSS hear a lot of background color was 0.50 paucity no don’t freak out you can copy the code needed just below the video description

click publish and set your conditions let’s review what we did

looking good but will also add a cool animation to it so the menu bar will scale down a bit when we scroll

back to our code here let’s out of Min height of 80 pixels to affect CSS class and again don’t panic you can find the CSS code in the video description below update and let’s check it out

cool this is amazing so try it out and get your visitors more by adding effects to your sticky elements and don’t forget subscribe to her YouTube channel for more fun videos

Add a review

Origin Ten  Ltd,
Queens House
200 Lower High Street
Watford
WD17 2EH

Stay tuned

Exceptional quality. Ethical factories. Radical Transparency. Shipping and returns.

    Privacy Preference Center