Menu Background Color Change On Scroll With Elementor's Sticky Header

✨ Join us in the Lytbox Academy Community:

My goal is to create a community for Web Designers, Developers, Freelancers, and Elementor enthusiasts to learn the design & business side of creating websites.

/////

✨ Learn High-Level Web Design Skills With Me:

🟢 Master Elementor while learning web design skills:

🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:

🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:

🟢 Become a Lytbox Academy Pro Member:

/////

✨ My Recommended WordPress & Web Design Tools:

👉 The hosting I use:

Cloudways (use promo code LYTBOX for 30% off 3/months)
xCloud:

/////

👉 My WordPress Tools:

Elementor Pro:
Breakdance Builder:
Bricks Builder:
Crocoblock:
SEOPress (the best SEO tool for WordPress!):
Perfmatters:
InstaWP:
WP Umbrella:

/////

Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox

#elementortricks #elementorstickynav how to change menu background on scroll in elementor

[LytboxStudio]

🔥Here are CSS and the link to get Elementor Pro (I am an affiliate and appreciate your support 😊)


👨‍💻Here is the CSS to copy and paste:

/* -- Changing the menu background on scroll effect -- */

.elementor-sticky--effects {
background: #3E3EF5!important; /* change the background color here*/
}

.elementor-sticky--effects .sticky-menu-items ul li a /* change the menu text color here*/ {
color: #fff!important;
}

.elementor-sticky--effects, .sticky-menu-items ul li a {
transition: .5s all ease-in-out;
}

[tonibui]

This is the easiest tutorial in terms of changing background color of header when scroll. Thanks very much!

[TheZatscha]

Thanks, I took the first 3 lines to just change my background color from blue to white and it worked!

[helenazrinski]

Thank you so much! After hours of trying, I finally got a solution! This made my day!

[stefanoroversi]

Thanks,
Very useful video. I needed to make a transparent background become solid On Scroll. Working perfectly

[CooperRidgeRE]

Thank you for this great tutorial...works great!! I have one question for you. In my menu I have an About menu item with a drop down with three subitems. Before I scroll everything works and looks great. On scroll everything works, but now my sub menu item settings for hover no longer work. On hover the text is suppose to change to light grey. Any thoughts?

[raymondbruce]

Thank You! just what I was looking for!

[rozzAugust]

Thanks! it was very helpful. I'm making my first website with Elementor and Im lovin it

[watchandlearn]

Thank you so much love from Pakistan 💕💕❤❤

[davidwright]

Hi Lytbox, thank you for the demonstration. I did not get my text color to change in my sticky menu when scrolled. Can you share more details on how to do this. I could not see your code example. Thanks again.

[ДимаБелогуб-юч]

Thank you for the tutorial it is wery helpful, can you please add extra information how to manage pointer colour after scrolling?

[getfreshwithsuefro]

When I add the code, horizontal scrolling appears. Then, if you resize the browser smaller and then wider, the nav doesn't resize back to full width.

[IzradaSajtovaSEO]

So simple and efective explanation ! Thanks a lot .

[TheButcherTheButcher]

Simply and effective, subscribed, thanks!

[MrNiamho]

This is fantastic, thanks so much. Only issue I'm having is the header remains above the content of the page, it's not on top of the first section. Do I need to change the margins on each page?

[cristinavalencia]

Excellent!! very
concise, well explained and tangle free. Thank you for you time!!

[ahmedberbic]

Pretty good video thanks a lot! Now I want to make my header change color multiple times, for example to become red when I scroll few lines, then yellow after another few lines. How can I do that?

[patriciomorel]

hey man! thanks for the great content! I've got a question, how would you add to this a top banner above this changing nav bar? for instance a banner that's always showing with free delivery or a special discount for the holiday season. Thanks!

[sumitghugharwal]

Hello Sir, I'm Here to support :) ; I can sense you have a ton of knowledge and experience with web dev.
and you know the core of it. 1st thank you for this video tutorial.

most of the tutorials only tell what plugin to use, and you brought in a simple CSS. It's a good points for noobs like me.. that, even we use elementor and all no code products but basic knowledge is important.

Again, keep this up and thank yo again for the solution.

[frankdrolet]

Hi Master, do you know how to make the transition back to black(original color) also smooth. Cause I put the transition to 1s for mine but when it comes back up there isn't a smooth transition, same if I make shrink my logo on scrolling ? Thanks for your time, love your vids!