How to change the Sticky Header background color on scroll without CSS in Elementor

hello thank you for being here and today we will learn about the how we can make this menu bar never sticky and we can change your scholar while scrolling down like this so this is the Target today and I think you will be looking for this so let's start without wasting any time so here we have this site again Let me refresh this you will see no effect right now I have created this transparent header already and I will just edit this one I will click on this and it will show this window to me now we have different of sections over here the first is logo second is this navigation and third is this one you won't be able to see that because the text is invite now the first thing is just go to the main Navigator this and go to style tab give it a color like I'm giving it black color in your case this will be a color that you will give it while you want it scrolling down like here when you scroll it down there will be the black color so next step is go to Advanced tab your emotion effects with a sticky and choose option top and while you choose this you will have to show this effect sticky on either of the devices so you can add or remove these devices mobile tablet desktop so we have wherever you would like to show this now the last step go back to the start tab switch on the scrolling effects go to transparency click on this and set the viewport 0 to 10 percent now the next step is just effects relative to set this to the viewport and change entire page set this to entire page now the thing is you will have to you will see that this has already added this effect so you can make this as less transparent while being on the page or you can make this as fully transparent like this it's up to you it's a few requirements let's save this and see how does that look okay so here we go we have no effects over here when we refresh this you will see the effects over there so that's that's how it easy it has so just the three steps over there and you can have this effects on your website so if you like this video give it a thumbs up thank you thank you for

Channel: WP Agent

Views: 4,019

Keywords: change header color scroll elementor, nav menu color scroll elementor, scrolling effects elementor, sticky menu elementor

Id: bRjPHwoCITw

Length: 3min 35sec (215 seconds)

Published: Sat Oct 22 2022