How to Change To A Different Header On Scroll Using Elementor Pro
In this Elementor tutorial, I will show how to change the header on scroll with Elementor Sticky Headers. The sticky header that will appear on the scroll will have a different background color, and a different logo, and the font color and style will also change. The menu is a part of Elementor Pro, so it is useful if you already have it installed on your website.
This is very useful when a transparent header and need to show a different sticky header with a different design are needed to make the logo and navigation menu visible against the background.
Below are the CSS codes used in the video:
/* Slide In From The Top Option */
.header-2 {
transform: translatey(-80px);
-moz-transition: all .3s ease!important;
-webkit-transition: all .3s ease!important;
transition: all .3s ease!important;
}
.elementor-sticky--effects.header-2 {
height: auto!important;
transform: translatey(0px);
}
.elementor-sticky--effects.header-1 {
display: none!important;
}
/* End Of Slide In From The Top Option */
My website:
https://tasvirwebsolutions.com/
𝗖𝗼𝗻𝘁𝗮𝗰𝘁 𝗺𝗲 𝗳𝗼𝗿 𝗵𝗲𝗹𝗽 𝗼𝗿 𝗳𝗼𝗿 𝗺𝘆 𝘄𝗲𝗯𝘀𝗶𝘁𝗲 𝗯𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝘀𝗲𝗿𝘃𝗶𝗰𝗲𝘀:
[email protected]
Purchase Elementor Pro here:
https://tasvirwebsolutions.com/elemen...
Get Bluehost Hosting, the best for self-hosted WordPress:
https://tasvirwebsolutions.com/bluehost