WordPress sticky sliding header using Elementor Pro and Unlimited elements

Learn how to make WordPress sticky header on scroll using Elementor Pro and Javascript code. Follow the steps shown in the video.

Get Unlimited elements Pro add-on:
https://bit.ly/designunlimited

Get Elementor Pro:
https://bit.ly/designelementorpro

Step 1: Create a widget using Unlimited Elements for Elementor and paste the following code into CSS and Javascript area of the created widget.

/*CSS Code*/

#sticky-panel {
position: fixed; /* Make it stick/fixed */
top: -350px; /* Hide the navbar 350 px outside of the top view */
width: 100%; /* Full width this is necessary*/
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/*End of CSS Code*/

//Javascript code will be in the first comment.

Step 2. Design separate parts of the header and under advanced CSS ID put sticky-panel

Step 3. Refresh the page once and drag the new widget created using Unlimited elements into the template.

Widget creator tutorial:
https://youtu.be/dXLEG1O3yAM

If you’re new to Elementor, learn the basics here:
https://youtu.be/ztBu0qCbrxk

Join our Facebook Group: https://www.facebook.com/groups/designschoolwp

Design your website: https://www.youtube.com/playlist?list=PL19jB3vK-qIUWYcJE0r2oFjRxMLxPBLFt

Build your website: https://www.youtube.com/playlist?list=PL19jB3vK-qIXBIpyRqq8nrjb6Z14l-7gs

Customise your website:
https://www.youtube.com/playlist?list=PL19jB3vK-qIWUqfAvRsGpbcrkmEnedXd8

Learn CSS animations:
https://youtu.be/bJpMfqMS5-g