Change the Logo, Menu, Text and the Header Background when Scrolling in Elementor

Make your Header Logos, Background Colours, Text, and more change colour or image with simple CSS! In fact - you can apply this anywhere on your site! Jolly Good Show!
What if you have a transparent background that needs to change to a solid/or semi-transparent colour? Now you can!
Rather than use a separate plugin or the Theme's header - you can change it all with Elementor. Have fun!
Here's the Code I used:
/* Change the Background Colour on Scroll */
.elementor-sticky--effects {
background: #ffffff!important;
}
/* The scroll-logo is currently off.*/
.scroll-logo {
display: none;
}
/* Shut this logo off and activate the other logo after scroll*/
.elementor-sticky--effects .scroll-logo {
display: inline-block;
}
.elementor-sticky--effects .original-logo {
display: none;
}
/* Change Text Colour and Links colour */
.elementor-sticky--effects .menutextcolours ul li a {
color: #000000!important;
}
PS: websquadron.co.uk
PPS: Don't miss out on our amazing Create a Website in One Weekend Course - and it comes with a FREE Elementor Pro License!! websquadron.co.uk/createwebsi...
PPPS: Contact us for any questions, new videos, hates/likes/love or to collaborate: [e-mail]
PPPPS: I must stress that we only build with Elementor and no other Page Builder.

[@tadmedialtd]

you are the man - looked for ages on this and could not find it. Thank you so much. Works like a dream. Well done A++

[@websquadron]

You are welcome!

[@akinsanmitaiwo7125]

Thanks a million. Just used this after doing several searches.

[@jessicaberggrun534]

This is awesome, thank YOU!

[@MichelleOnPointTV]

THANK YOU!! Your cheat saved my day!!! Been trying to figure this out for hours! Finally worked!

[@websquadron]

Mega-Awesome !

[@OManoBlox]

Hey perfect tutorial, thanks a lot from Brazil !!

[@canada4ever853]

so simple!! Thanks

[@honeywavecreative2762]

great splanation and simple coding. Thanks!

[@websquadron]

Glad you liked it!

[@pabloibarguren6236]

it took me just one video to know that I have to subscribe to this channel... well done !

[@websquadron]

Big thanks Pablo!

[@Nagi2626]

Thanks your video helps me alot😊😊

[@luckymash9415]

Thank you so much!

[@Alex-nn4qz]

Such a nicer way of doing this than other solutions! nice stuff. Would be good to see some transitions too...

[@websquadron]

Thanks - I have an updated video coming out on 25th April :)

[@SalphuricAcid]

THIS IS AN AMAZING AND SIMPLE SOLUTION THANK YOU BROTHER... IT IS HELPFULL FOR ME THANKS AGAIN FOR SHARING THIS AMAZING PEACE OF CODE AND METHOD......

[@shalimmora2015]

Youuuuuuuuuuu!, thank you very much

[@liamswordpresstutorials]

Amazing thanks!

[@websquadron]

Nice one :)

[@csmacnee]

Hi - great video and all working though how do I set the sticky scrolling or effects offset as the CSS snippet overrides the Elementor Pro settings. Thanks you have saved me a few times - Cheers

[@doctor-dan]

Great video!

[@websquadron]

Glad you enjoyed it

[@ayushmanjena5362]

best video. Keep making it bro

[@websquadron]

Big thanks :)

[@okwebsitedesign7156]

Thank you

[@lucascouto8721]

You're the best!!!!

[@websquadron]

Yes :)))

[@sabinodargenio]

Thanks a lot! I have a question though. I would like to hide the menu and then as I scroll down I would like the menu back in the header. At the moment I can only achieve the opposite and I don't understand why. Any help would be appreciated :)

[@websquadron]

Can you clarify that.
So initially the menu in the header can be seen, or is it invisible until you scroll?

[@sergiopoledri4375]

Hey @websquadron, I put all the code in "@media only screen and (max-width: 420px)" and it works initially but turns off after very little scrolling, the header returns to normal. What do you think it depends on?
Your videos are very valuable, keep it up man!

[@websquadron]

Hmmmm... Let me have a play later this week with revisiting this.

[@digitalisierungsagentursachsen]

Hi, thank you a lot for this video! I have a quick question: I have a hover effect on the menu while it is on top. But when I scroll down and the color changes, the hover effect is gone. Is there any way to keep it, or add an additional hover effect?

[@websquadron]

That would need some thinking.

[@stevechong65]

Hey Imran, thanks for the tutorial, I was wondering if it was possible to do it in Elementor Free + Header/Footer Bulder for Elementor? Lots of people are using this combination. Thanks in advanced.

[@websquadron]

Could be done with the Header and Footer Builder Plugin.

[@stevechong65]

@@websquadron I was stuck on the scroll offset, HT Builder plugin didn't have this function.

[@yonatanmizrahi6878]

hello! thanks for the patient, my problem is - at the moment i pasted the code, the logo and the background appear as the scroll ones (״scroll-logo״ with white background), even tho i'm at the top of the page before scrolling. and then nothing happen when i scroll

[@websquadron]

Have you added an Offset Effects value?

[@yonatanmizrahi6878]

@@websquadron no! just did! it's works.. thank you!
can i also add shadow just after scroll?

[@ace_design_education]

Hi - thanks for the video. If I want the colour change to be only on one section of the page, how could I go about that? For instance, if I have a black menu with a white page background, but in one section the background is black, how would you suggest going about making the menu white only for that section?

[@websquadron]

This is a tricky one and would need a JS listener added where it detects the section and then adapts the colour. You'll need some expert coding for that.

[@yonatanmizrahi6878]

thank you! for respond, its working well, i wanted to ask if i can also add a shadow value also only after scroll..
thanks in advance!

[@websquadron]

You could with some css again where box-shadow appears

[@yonatanmizrahi6878]

@@websquadron can you be more specific by what should i write?

[@javiergutierrezsanchez4336]

Great video !!! Thank you very much from Spain! I have already subscribed to your channel :) I have a question, can you add shadow exclusively to the menu when it changes to white? Because if I add it the normal "box shadow" appears at the beginning when it is transparent and it looks pretty bad.... Thank you very much again!

[@websquadron]

You would need to add it as CSS rather than using the style tab.
Let's say you want to create a box shadow with a horizontal offset of 2 pixels, a vertical offset of 4 pixels, a blur radius of 6 pixels, and a colour of black.
selector {
box-shadow: 2px 4px 6px black;
}

[@javiergutierrezsanchez4336]

@@websquadron The shadow is still visible at the beginning... do you know where I should place the code so that it is only visible when you scroll? Sorry I know very little of coding.... Thank you very much!!

[@websquadron]

@@javiergutierrezsanchez4336 You need to add this at the start of the code .elementor-sticky--effects

[@javiergutierrezsanchez4336]

@@websquadron You are the best!!

[@jodiiiix]

@@websquadron Can you maybe put the full code for me? I tried it by putting it after the sticky-efects but it doesnt work..
I think i do something wrong.
/* Change the Background Colour on Scroll */
.elementor-sticky--effects selector {
box-shadow: 2px 4px 6px black;
}{
background: #ffffff!important;
}
/* The scroll-logo is currently off.*/
.scroll-logo {
display: none;
}
/* Shut this logo off and activate the other logo after scroll*/
.elementor-sticky--effects .scroll-logo {
display: inline-block;
}
.elementor-sticky--effects .original-logo {
display: none;
}
/* Change Text Colour and Links colour */
.elementor-sticky--effects .menutextcolours ul li a {
color: #000000!important;
}

[@leomarkconstantino4451]

HI, I have a 3D glb file and I put model viewer... When I scroll down the 3d is there but I want it to mve side by side while I am scrolling down the site while the content are there. Is that possible?

[@websquadron]

You may need to use gsap or a motion plugin to get the exact motion effect

[@StephenPiddingtonLongbow]

Thanks, this is really useful. I have one small problem, though, which is that I have an icon box with a title, and the colour does not change when I scroll, even though I gave it the class menutextcolours. I set it to white initially, in the style settings. (I tried it with social icons to replicate what you did, but I still get the same problem.)

[@StephenPiddingtonLongbow]

Do you have any advice about that?

[@StephenPiddingtonLongbow]

(It doesn't have to be an icon - I just want to add a phone number. I tried plain text but the colour change still doesn't work.)

[@Miguelonxgramage]

Good video! Subscribed
What code would you use to do the same with the search engine and shopping cart?
Thanks,

[@websquadron]

I wouldn’t use code for that and instead the 3.5 cart and checkout widgets or ShopEngine

[@hoomanrashidpour8173]

Hi, thank you for your time, I copied the code but when I put name for cass classes the original logo disappear instead of scroll logo

[@websquadron]

Are you following the video in the order that I built it?

[@javiergutierrezsanchez4336]

Hi Web Squadron, I have another quick question: in the video we change the color of the text to black when we scroll, but I have a submenu that should remain white when I hover, and with the code I get all black, how could I put an exception that only affects the submenu? Thank you again!

[@websquadron]

Hi, this is where you will need to inspect and get the Class name of the Main Text, and the Sub Text, and then make sure that only the Main Text is affected.

[@javiergutierrezsanchez4336]

@@websquadron Thank you!!

[@Painfultones]

Can you help me, I tried it but it doesn't work, when i duplicated the logo and put the css ID in each one and applied the css code to the main section it just add a white color in the background, the logos still the same above each others, the original logo don't disappear and the menu text's color doesn't change

[@websquadron]

Due to the high number of daily requests, I don’t investigate or propose possible solutions unless they're a 1-2-1 consultation.
If you're still interested, visit my booking page: learn.websquadron.co.uk/#support

[@webstudio22]

Amazing! Thanks a lot! how can i change the color of menu item divider on scroll?

[@websquadron]

Inspect to get the class name and then add that to the code.

[@gabrispinelli]

Hii! Thanks for the video! I'm wondering how to change the hamburger color as well because that code doesn't work in responsive. Could you help, please?

[@websquadron]

It should do, unless you're using a @media prefix?
Make sure that the Nav Menu Toggle has no colour applied in Style, and instead add to the CSS for the Initial Colour and then the 'after' colour when you scroll.

[@ioannapanali7576]

@@websquadron Hi! thanks for your help, you are amazing! I have the same problem with Gabriella...could you tell me more specifically what to do because I'm new and I don't know what code I should use...

[@riegaldutoit5792]

hello can you make a tutorial on how to change the drop-down menu button for phone i mean when you press on the drop down button then there is a background how can i change the color of the bacground

[@websquadron]

We’ve done videos on pop up off canvas menus and you could style the drop downs in the style tab. You may need to add some css if you want to just target the drop-down part of the nav menu. Use SiteOrigins CSS (free plugin) to help you write the code.

[@chrishodson2748]

Thanks for this - really useful. How would you add a transition ease effect to this?

[@websquadron]

Thanks. See this updated version: th-cam.com/video/EIkXhekBmKY/w-d-xo.html
transition: 0.5s ease-in-out;

[@chrishodson2748]

@@websquadron Thanks - where in the code would be best to add the 'transition: 0.5s ease-in-out;' line?

[@websquadron]

@@chrishodson2748 Hi
Can you paste your current code that you're using here.

[@chrishodson2748]

@@websquadron Sure. Currently using:
/* Change the Background Colour on Scroll */
.elementor-sticky--effects {
background: #ffffff!important;
}
/* The scroll-logo is currently off.*/
.scroll-logo {
display: none;
}
/* Shut this logo off and activate the other logo after scroll*/
.elementor-sticky--effects .scroll-logo {
display: inline-block;
}
.elementor-sticky--effects .original-logo {
display: none;
}
/* Change Text Colour and Links colour */
.elementor-sticky--effects .menutextcolours ul li a {
color: #1C244B!important;
}

[@websquadron]

@@chrishodson2748 I would add it for each part.
so...
/* Change the Background Colour on Scroll */
.elementor-sticky--effects {
background: #ffffff!important;
transition: 0.5s ease-in-out;
}

[@user-mk9ve6ps3q]

argh, love this solution - but my background is set to transparent yet still shows as white at the top (I have swapped the colours over on your code as I want it to scroll to a black background on scroll)

[@websquadron]

Might need you to add a negative margin to the page section so that it overlaps (or goes under) the transparent header.
Or add a negative bottom margin to the header so that it’s always over the page sections.

[@cipher893]

What could the reason being behind the sticky menu not working in edge anymore?

[@websquadron]

No reason. Which theme are you using?

[@sebastianodibusti]

Thanx a lot for your sharing, I need to change 6 diferent color menu, I have a vertical scrolling website, Im i need change the menu color in 6 diferents sections, how I can do that? thanx mate

[@websquadron]

You’ll need to add some css with js to trigger changes based on VH of the entire page. You’ll need a coder for that.

[@WileyChandler-po4pw]

Hey! Awesome tutorial. Is there an easy way to replicate this effect when hovering over the menu/header? It'd be great if both effects functioned simultaneously!

[@websquadron]

You could add a Class Name to the Section.
Let's call it abcd.
Then, inside the Custom CSS for the Section, you'd write:
.abcd:hover {add the changes;}
So let's say that you want it to go from Black to White.
.abcd {backgroud-color: #000;}
.abcd:hover {background-color: #fff;}

[@WileyChandler-po4pw]

@@websquadron Awesome! Thanks for the quick response. I'll give it a go!

[@WileyChandler-po4pw]

@@websquadron I also noticed that there's a short delay with the menu items changing colors. Is there a way to remove that crossfade or 'fade in/out' so that the change between colors immediate?

[@andymathysphotography1998]

Hi, is it also possible to change the background if the background is an image and not a color?

[@websquadron]

Let me think about that one.

[@andymathysphotography1998]

@@websquadron Please let me know if you will find a solution. I was thinking to use background-image in the css or maybe make two headers, on of them transparent and the other one with a bg image

[@jackh1137]

Great tutorial! Works great except I cannot get the background color to change from transparent to white. Any suggestions?

[@websquadron]

Are you adding the colour ?

[@jackh1137]

@@websquadron yes in the css. Logos change, menu text color changes, but background stays transparent.

[@jackh1137]

Figured it out. This code is from the descirption -
/* Change the Background Colour on Scroll /
.elementor-sticky--effects {
background: #ffffff!important;
}
It is missing an * after the word Scroll. The code in the comments section is correct. Works like a champ now!!! Thanks!!

[@franktielemans6624]

You don't have to upload a black version and hide the white one when you use filter: invert(1).

[@websquadron]

Good tip. I’ll try that.

[@floraohara3342]

Do you have a tutorial on how to - say move a button that was in the top menu into the scroll menu?

[@websquadron]

Do you mean a button that’ll now appear in the mobile toggle?
You’d just create an alternate menu and assign that to the mobile nav menu and responsively hide that on the desktop

[@takatruong33]

I also want to add hover effect to the header the color change when hovered too

[@websquadron]

Have you tried adding selector:hover {background-color: #ffffff} on the column?

[@logarik7645]

Love u guy, my hero!
But I want to set the transition time of background-color, how to do this?

[@websquadron]

You can add some Transition CSS; 0.5s

[@logarik7645]

@@websquadron tks, it worked
love u bro

[@nathanlenas8671]

Does it work on shopify as well?

[@websquadron]

Sorry but I don’t use Shopify

[@WileyChandler-po4pw]

Here's another question for you: How do I replicate this function on the tablet and mobile headers?!

[@websquadron]

You may need to use @media queries

[@sylvias.3380]

Thank you so much! Unfortunately the code is not for a responsive website. :-(

[@websquadron]

Have you tried to add the @media css bits before to make it work better for the screen.

[@sylvias.3380]

@@websquadron I don't understand. Where i have to put the tag @media in your code?

[@mr_oizofpv4432]

doesn't work anymore with containers .

[@websquadron]

Did you not see this: th-cam.com/video/J8d4yVBQk9M/w-d-xo.htmlfeature=shared

[@victorbonanho1980]

I think it is not working anymore :(

[@websquadron]

Not working how? All of the css? I was using this last week.

[@victorbonanho1980]

@@websquadron Found the error, should go to moving effects and change to 1 in the main section

[@rg-web-design]

Where is the CSS code to copy?

[@websquadron]

Ohhhhhh!
/* Change the Background Colour on Scroll */
.elementor-sticky--effects {
background: #ffffff!important;
}
/* The scroll-logo is currently off.*/
.scroll-logo {
display: none;
}
/* Shut this logo off and activate the other logo after scroll*/
.elementor-sticky--effects .scroll-logo {
display: inline-block;
}
.elementor-sticky--effects .original-logo {
display: none;
}
/* Change Text Colour and Links colour */
.elementor-sticky--effects .menutextcolours ul li a {
color: #000000!important;
}

[@websquadron]

PS added the the Description too :)

[@rg-web-design]

@@websquadron Cheers!

[@websquadron]

@@rg-web-design Many thanks for alerting me !

[@xavigarcia6207]

doesnt work

[@websquadron]

Are you using the updated video with containers?

[@websquadron]

CSS Code:
/* Change the Background Colour on Scroll */
.elementor-sticky--effects {
background: #ffffff!important;
}
/* The scroll-logo is currently off.*/
.scroll-logo {
display: none;
}
/* Shut this logo off and activate the other logo after scroll*/
.elementor-sticky--effects .scroll-logo {
display: inline-block;
}
.elementor-sticky--effects .original-logo {
display: none;
}
/* Change Text Colour and Links colour */
.elementor-sticky--effects .menutextcolours ul li a {
color: #000000!important;
}

[@websquadron]

Add this to your Section > Advanced > Custom CSS >
/* Change the Background Colour on Scroll */
.elementor-sticky--effects {
background: #ffffff!important;
}
/* The scroll-logo is currently off.*/
.scroll-logo {
display: none;
}
/* Shut this logo off and activate the other logo after scroll*/
.elementor-sticky--effects .scroll-logo {
display: inline-block;
}
.elementor-sticky--effects .original-logo {
display: none;
}
/* Change Text Colour and Links colour */
.elementor-sticky--effects .menutextcolours ul li a {
color: #000000!important;
}

[@marekfilka3023]

Hey man, it hellped me, thank you. Iam only courious about one think. If you make your header white on scroll, and then you have section down bellow hero section that is white background its not gonna look OK. How to put a shadow whit that scroll white bg?

[@websquadron]

You could add a shadow border to the white section

[@websquadron]

Could add a shadow border to the white section :)