Change the Logo, Menu, Text and the Header Background when Scrolling in Elementor
HTML-код
- Опубликовано: 25 авг 2024
- 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...
PPPS: Contact us for any questions, new videos, hates/likes/love or to collaborate: info@websquadron.co.uk
PPPPS: I must stress that we only build with Elementor and no other Page Builder.
![Create a Color Changing Sticky Header Without Code in Elementor [PRO]](/img/1.gif)
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;
}
Thanks a million. Just used this after doing several searches.
Thank you
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++
You are welcome!
Thanks your video helps me alot😊😊
it took me just one video to know that I have to subscribe to this channel... well done !
Big thanks Pablo!
THANK YOU!! Your cheat saved my day!!! Been trying to figure this out for hours! Finally worked!
Mega-Awesome !
Hey perfect tutorial, thanks a lot from Brazil !!
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......
Thank you so much!
This is awesome, thank YOU!
Youuuuuuuuuuu!, thank you very much
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
so simple!! Thanks
great splanation and simple coding. Thanks!
Glad you liked it!
best video. Keep making it bro
Big thanks :)
Such a nicer way of doing this than other solutions! nice stuff. Would be good to see some transitions too...
Thanks - I have an updated video coming out on 25th April :)
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?
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.
@@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...
Amazing thanks!
Nice one :)
Great video!
Glad you enjoyed it
You're the best!!!!
Yes :)))
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
Have you added an Offset Effects value?
@@websquadron no! just did! it's works.. thank you!
can i also add shadow just after scroll?
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.)
Do you have any advice about that?
(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.)
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 :)
Can you clarify that.
So initially the menu in the header can be seen, or is it invisible until you scroll?
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
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
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)
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.
You don't have to upload a black version and hide the white one when you use filter: invert(1).
Good tip. I’ll try that.
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;
}
Thanks for this - really useful. How would you add a transition ease effect to this?
Thanks. See this updated version: ruclips.net/video/EIkXhekBmKY/видео.html
transition: 0.5s ease-in-out;
@@websquadron Thanks - where in the code would be best to add the 'transition: 0.5s ease-in-out;' line?
@@chrishodson2748 Hi
Can you paste your current code that you're using here.
@@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;
}
@@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;
}
What could the reason being behind the sticky menu not working in edge anymore?
No reason. Which theme are you using?
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.
Could be done with the Header and Footer Builder Plugin.
@@websquadron I was stuck on the scroll offset, HT Builder plugin didn't have this function.
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!
Hmmmm... Let me have a play later this week with revisiting this.
This works amezing with Elementor Pro's: Wordpress menu. Only with Elementor Pro's: menu option, it doesnt. Do you know why?
That's because of different class names for the Mega Menu
@@websquadron How can i fix it?
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
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.
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?
That would need some thinking.
Amazing! Thanks a lot! how can i change the color of menu item divider on scroll?
Inspect to get the class name and then add that to the code.
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!
You could with some css again where box-shadow appears
@@websquadron can you be more specific by what should i write?
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?
You may need to use gsap or a motion plugin to get the exact motion effect
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
Are you following the video in the order that I built it?
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?
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.
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!
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.
@@websquadron Thank you!!
Hi, is it also possible to change the background if the background is an image and not a color?
Let me think about that one.
@@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
I also want to add hover effect to the header the color change when hovered too
Have you tried adding selector:hover {background-color: #ffffff} on the column?
Good video! Subscribed
What code would you use to do the same with the search engine and shopping cart?
Thanks,
I wouldn’t use code for that and instead the 3.5 cart and checkout widgets or ShopEngine
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!
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;
}
@@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!!
@@javiergutierrezsanchez4336 You need to add this at the start of the code .elementor-sticky--effects
@@websquadron You are the best!!
@@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;
}
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
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.
doesn't work anymore with containers .
Did you not see this: ruclips.net/video/J8d4yVBQk9M/видео.htmlfeature=shared
Do you have a tutorial on how to - say move a button that was in the top menu into the scroll menu?
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
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!
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;}
@@websquadron Awesome! Thanks for the quick response. I'll give it a go!
@@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?
Great tutorial! Works great except I cannot get the background color to change from transparent to white. Any suggestions?
Are you adding the colour ?
@@websquadron yes in the css. Logos change, menu text color changes, but background stays transparent.
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!!
Does it work on shopify as well?
Sorry but I don’t use Shopify
Where is the CSS code to copy?
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;
}
PS added the the Description too :)
@@websquadron Cheers!
@@rg-web-design Many thanks for alerting me !
Here's another question for you: How do I replicate this function on the tablet and mobile headers?!
You may need to use @media queries
Thank you so much! Unfortunately the code is not for a responsive website. :-(
Have you tried to add the @media css bits before to make it work better for the screen.
@@websquadron I don't understand. Where i have to put the tag @media in your code?
Love u guy, my hero!
But I want to set the transition time of background-color, how to do this?
You can add some Transition CSS; 0.5s
@@websquadron tks, it worked
love u bro
doesnt work
Are you using the updated video with containers?
I think it is not working anymore :(
Not working how? All of the css? I was using this last week.
@@websquadron Found the error, should go to moving effects and change to 1 in the main section
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?
You could add a shadow border to the white section
Could add a shadow border to the white section :)