Thank for this video ! It helped me on a lot of website project 😊Here the summary to help viewers : 00:00 - Introduction 00:30 - Requirements 00:51 - Menu creation 3:49 - Adding logos 5:13 - CSS for logo 7:29 - CSS for background 11:04 - Explanations 13:18 - Conclusion
This man just saved my sanity. The tips on changing the logo, font colour, background etc after scrolling was awesome. Virtual fist-bump with a high-five, and a nod.
Hello Jeffrey!! Thank you SO MUCH for this tutorial, I implemented everything you explained and it works almost perfectly. I did run into an issue I'm wondering if you've noticed. If I adjust the width of the browser in and back out, the menu will stay at the width and not respond dynamically. It would be SO amazing if you happened to have a fix. I just loved your approach and personality in this video!
@LytboxStudio Having the exact same problem which roots in the css. When I comment it out its working again. Is there a chance you can take a look into it?
I wonder if it would be possible to do it without Elementor Pro, using e.g. WP code and entering additional java script codes.What do you think about it?
What I'd love to know is if there is a way to activate the d-logo, etc and all other font/background changes when you hover over an item (say the menu) - so it's not just activated by the Scroll. To clarify - if we scroll 100px the background, logo, font changes - excellent. But if it could change by us hovering over the menu as well, without scrolling on the screen - then that would be great!
That can absolutely be done with some CSS and a good idea. Maybe I'll make a short video on that. Just added it to my video creation list. Thanks for the dope idea!
Thanks for this tutorial. I needed to make the logo show/hide on scroll. With a little tweaking to the css, I was able to achieve what I was going for. Your tutorial provided just what I needed.
Hey! This is AMAZNG and I have it working, however I am having an issue where it's forcing the bar into a boxed area (instead of full width) sporadically. Any ideas? It will be full screen most of the time and then randomly it will go boxed and leave the sides open
Thanks for the clear and concise intructions. One thing - I'm using an icon box widget for the menu which will action a pop up menu. I've added css of sticky-menu-items to it, however the colour chaneg css doesn't seem to work. Any help much appreciated!
Exactly what I was looking for! I can see you have a dynamic option next to "effects offset". Is it with another plugin? I'm trying to get the colour/logo switch to happen at a specific point on the page: the moment when the header scrolls past a fullscreen splash image that is at the top of the site and set to "fit to screen". Thanks!
For me it's a two and half year old video, however, it´s one of the best videos, for this purpose, that i've seen so far. Thanks! One question, would be with css that i would be able to make it shrink when scrolling down? If so, is it just by setting some kind of with or percentage to the logo?
@@LytboxStudio This is awesome! My only issue is with the dropdowns. When I scroll down, my dropdown hover background color is the same color as my dropdown hover text color. Is there any dropdown css to change only the dropdown hover text color? Thanks in advance!!!
Technically, we are creating this effect with just CSS. The Elementor plugin does not have this effect as an option. But they do give options to add effects to sticky elements with just CSS. If you were to create this effect or any sticky effect with pure code and no plugin, you would need both CSS and JS. I think the advantage goes to using Elementor on this one.
@@LytboxStudio yes that's right, but I meant a plugin especially for this sticky header effect. There a lot of plugins for which you can create such effects completely without css. And if you constantly use plugins for any different effects, your Dashboard would pile up with quite a few plugins and this would lead to other problems such as Slow down the page and security issues...is that correct? Thank you in advance.
Thank you so much! We wanted to do exactly that effect for a client's website and I was thinking... oh man, do I need to do javascript? But then my brain worked and I thought, that MUST be doable in Elementor with some CSS. After some googling and a few minutes later, I found your AMAZING tutorial. Thank you again so much. You have my subscription!
Woooah Jeffrey - another great video.! Thanks very much! Is it possible to make a logo change from one image to another AND make it shrink as described in one of your other fantastic guides?
It is. The technique in the video is actually using 2 different images for the logos, a dark logo image, and a light logo image. You can change your images to any you choose
Really great vid thank you! I have my cart, account and search icons on my sticky header but I’m unsure of how to change the code so that the colour change applies to them also? I’m a newbie so sorry if this is a simple thing but any advice would be much appreciated!
This is a great video and has helped me immensely. some of my pages on my new site have a second sticky menu working as a submenu - is there a way I can ensure that this only applies to my header and not all sticky items?
Not a problem. Try this out: /*changes the active menu item color on scroll*/ .elementor-sticky--effects .sticky-menu-items ul li .elementor-item-active { color: /*add your color here*/!important; /* edit here to change the active menu item text color for sticky header */ }
Very cool , Jef 😍 you know.... what I like from this video than others? That you explain each the css function so I can learn better why you use that css code... Very useful for beginner like me 😁👍
Great video! Helped me a lot! However, I have the divider enabled for my menu and the color of that is not changing with it. Any ideas how I can fix this?
It snaps to the new logo once I reach the pixels I chose in the effects offset. I've played with the transition timing; I just can't get it to smoothly transition. Any tips?
Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you? I have plans for an updated tutorial with the new versions of Elementor and will have a fix for this.
Hi Jeff, many thanks for your video as I made it work! I was looking to apply this effect but surprised that I couldn't find a decent tutorial... until now! Just one quick concern: I applied the background colour to the background header on scroll. However, it's also applying this colour effect to other parts on the website (headings, html blocks...) which also are sticky. Any idea on how to solve that? Many thanks!
Nacho Segura thanks mate. Glad to hear it worked! If you are using multiple sticky sections then need to use classes. Try this: Add a class to your sticky navbar section. And instead of just adding the .elementor-sticky-effects combine the classes. It should look like this - .elementor-sticky-effects.your-sections-class without any spacing. Let me know if this works. Cheers
Hey Jeff! This tutorial helped me so much!! Quick question, if I want to apply the fading transition effect to the dark logo as well, so it doesn't switch instantly, what CSS command should I add to the code?
This is by far the best tutorial I have followed for a long time. thank you. Just one question: I add a hover effect on my menu bar. When transparent background and white text I can hover over it and it turns yellow. the way I want it. When scrolling and header turns sticky, the text changes to grey (what I want) but I loos my hover effect yellow. Is there a CSS code I could add to keep the yellow hover effect over the menu? thank you so much in advance!
Thanks for your comment! I think I would need to check out your site to send a correct CSS snippet. If you can leave a link here I can check it out. Or if you want to keep your link private, you can DM my in my Instagram - instagram.com/lytbox_co/
@@LytboxStudio hi lytbox Digital, just message you on Instagram again with another issue I have on this effect. It's working but I need to remove a background overlay while scrolling. And the snip I created doesn't work. I sent it to you via Instagram with the page domain etc. would so much appreciated if you could have a quick look at it. Thank you so much.
Thank you so much! There is. Where you see 'transition: .5s all ease-in-out;' this controls the transition. the .5s is where to change the transition speed. The 's' stands for seconds. So right now it is .5 or half a second for the transition. All you need to do is change the .5 to something higher to slow down the transition. On thing is this is not working on the logo. I will add a fix for the logo transition soon.
@@kaizendigital2544 I was doing some testing and found you can use multiple elements. .d-logo { height: 0; opacity: 0; overflow: hidden; } /* SWITCHES LOGO ON SCROLL */ .elementor-sticky--effects .d-logo { opacity: 1; transition: .3s all ease-in-out; height: auto; }
Thanks for this Great tutorial. Following your instructions there are two issues I still cannot overcome: ⁃ When I change the menu on scroll, I cannot find a way to change colors on the link (menu item . What works for the first menu doesn’t work for the second one. ⁃ For the mobile or tablet design, I cannot change the color of the hamburguer icon menu. I you have any advise on this I will appreciate your help on this. Best,
Thanks and sure, there is a way to change those. /*change color to the mobile menu toggle*/ .elementor-sticky--effects .sticky-menu-items i { color: /*add your color here*/!important; } /*add color to the background of mobile toggle*/ .elementor-sticky--effects .sticky-menu-items .elementor-menu-toggle { background: /*add the background color here or add transparent for no background color*/!important; } And for the menu item links I am guessing you mean the hover? If so try this: /* CHANGES THE TEXT HOVER COLOR ON SCROLL */ .elementor-sticky--effects .sticky-menu-items ul li a:hover { color: #333!important; /* edit here to change your text color for sticky header */ }
Thank you so much for this tutorial! Just like Livia i have a hover effect on my menu but when i start scrolling i also lose my hover effect! Do you know how to fix that?
I have found for some hovers, we need to add the hover with CSS. If you could share your site's link here I can send you the right CSS for the hover. Or you can share with me on my Instagram - instagram.com/lytbox_co/
Hi, This CSS snipet works great, however when it switches to mobile or tablet view the hamburger icon is still white. In the header, I've also added social media icons. The color of these doesn't change either. How can I fix this?
Here's how to change the toggle color and the background to the hamburger toggle: /*change color to the mobile menu toggle*/ .elementor-sticky--effects .sticky-menu-items i { color: /*add your color here*/!important; } /*add color to the background of mobile toggle*/ .elementor-sticky--effects .sticky-menu-items .elementor-menu-toggle { background: /*add the background color here or add transparent for no background color*/!important; }
I have meant to make this video and will get it out soon. This can be done by either shrinking the logo size or reducing the top and bottom padding of the section the nav is in on scroll with a little bit of CSS. I'll have this one out very soon!
nice tutorial! by the way for some who cannot make the light logo disappear the CSS is just missing a comma to fix it! nice tutorial thank you very much!
Has anyone addressed how to change the background color above the header specifically on Safari, mobile version? That color is inheriting the background page color instead of the header background color.
Hey Jeff! This is just what I have been looking for, well explained... You have a new suscriber. The only missing thing is... How can I shrink header height combined to all explained effects? (I don't want to shrink Logo) Thank you so much!!!
Thanks for the sub! I appreciate it! To change the header height without changing the logo size, you have to target the padding. This is actually on my list of upcoming videos. I have it pushed to the top. I will try to get it out asap. Thanks!
Thank you for this GREAT tutorial! Do you have any idea how I can add a box shadow on scroll only so I can add a little separation to the header? Also is it possible to make the white background on scroll somewhat transparent? Thank you!
Amazing tutorial!!! I have followed your instructions and it worked perfectly on desktop mode, however on mobile mode the hamburger menu does not appear!! What I have to do?? Thank you in advance!
If your hamburger menu is disappearing then the css class used to hide the logo must be connected to your hamburger menu too. Can you check and see if the d-logo and l-logo classes are only on the image widgets and nowhere else
@@athinadimakopoulou9334 I took a look and looks like the icon is not loading for the mobile menu hamburger. Here is a quick Loom video to show what I see and hopefully help to get that fixed. As soon as the hamburger icon is showing I can share a CSS snippet to change the colors on scroll. Or another option, to not use the scrolling effects on mobile. www.loom.com/share/4c8ba938716045dfab635f7eecdaa77e
@@LytboxStudio I have already followed your instructions that you described me at the video but unfortunately nothing have changed! What I have to do? I can't thank you enough for your help!!!
Hey Jeffrey, thank you for this. It's super well explained and easy. I'm getting a little issue: when I scroll back up, the transition is instant and not smooth as when I scroll down. I tried different browsers and adding -webkit-, etc but it doesn't work. I also tried changing "all" for "top" and nothing. Also: I noticed that the menu items flickr a little bit when scrolling up, like they have an entrance animation (and I tried setting that to no, aswell). Hope you see this message, maybe I'm missing something. Thank you and keep up the good work!
Hey Martin, that's great and thanks for sharing that fix! I think a few others had the same issue. Whenever someone does I can share you fix. Much appreciated!
Hi, awesome tutorial. Thank you on this. It helped a lot. Is there a chance that we can bring it one stept further? What about a shrinking sticky-menu bar?
Thank you very much, it works perfectly fine!! Do you know how I can change the header from sticky to fixed when it changes to the dark logo? It would help me a lot :)
This worked perfectly in the Elementor studio bud, but doesn't work in the live site. I can see everything, both the light and the dark logo's in the live site and no transitions happening. Don't know if this is a glitch with the new latest Elementor update or what. Any ideas please???
DesignSoSimple usually when something works in the Elementor editor but not on the live site it’s due to caching. Try clearing all cache first and check on incognito mode. If that doesn’t work, send me your sites link and I’ll take a look
The CSS is pinned in the top comment: /* HIDES THE DARK LOGO */ .d-logo { display: none; } /* SWITCHES LOGO ON SCROLL */ .elementor-sticky--effects .d-logo { display: inline-block; } .elementor-sticky--effects .l-logo { display: none; } /* CHANGES THE BACKGROUND MENU ON SCROLL */ .elementor-sticky--effects { background: #fff!important; /* edit here to change the background color for your sticky header*/ } /* CHANGES THE TEXT COLOR ON SCROLL */ .elementor-sticky--effects .sticky-menu-items ul li a { color: #333!important; /* edit here to change your text color for sticky header */ } /* CONTROLS THE TRANSITION SPEED - KEEP ALL SAME SPEED TO HAVE A CLEAN EFFECT */ .elementor-sticky--effects .sticky-menu-items ul li a { transition: .5s all ease-in-out; } .elementor-sticky--effects { transition: .5s all ease-in-out; }
✅ CSS Here 👇 /* HIDES THE DARK LOGO */ .d-logo { display: none; } /* SWITCHES LOGO ON SCROLL */ .elementor-sticky--effects .d-logo { display: inline-block; } .elementor-sticky--effects .l-logo { display: none; } /* CHANGES THE BACKGROUND MENU ON SCROLL */ .elementor-sticky--effects { background: #fff!important; /* edit here to change the background color for your sticky header*/ } /* CHANGES THE TEXT COLOR ON SCROLL */ .elementor-sticky--effects .sticky-menu-items ul li a { color: #333!important; /* edit here to change your text color for sticky header */ } /* CONTROLS THE TRANSITION SPEED - KEEP ALL SAME SPEED TO HAVE A CLEAN EFFECT */ .elementor-sticky--effects .sticky-menu-items ul li a { transition: .5s all ease-in-out; } .elementor-sticky--effects { transition: .5s all ease-in-out; } ============================================= You will need Elementor Pro in order to create this feature. Here is a link to get the Pro version (open transparency, this is an affiliate link and appreciate the support ❤️:)) 👉✅ elementor.com/pricing/?ref=4977&campaign=yt
@@austinskillings4550 I just added the CSS to the description. I think pinned comments don't show all the time. Going forward I will make sure to add to the descrption
@@austinskillings4550 Here is the CSS - ✅ CSS Here 👇 /* HIDES THE DARK LOGO */ .d-logo { display: none; } /* SWITCHES LOGO ON SCROLL */ .elementor-sticky--effects .d-logo { display: inline-block; } .elementor-sticky--effects .l-logo { display: none; } /* CHANGES THE BACKGROUND MENU ON SCROLL */ .elementor-sticky--effects { background: #fff!important; /* edit here to change the background color for your sticky header*/ } /* CHANGES THE TEXT COLOR ON SCROLL */ .elementor-sticky--effects .sticky-menu-items ul li a { color: #333!important; /* edit here to change your text color for sticky header */ } /* CONTROLS THE TRANSITION SPEED - KEEP ALL SAME SPEED TO HAVE A CLEAN EFFECT */ .elementor-sticky--effects .sticky-menu-items ul li a { transition: .5s all ease-in-out; } .elementor-sticky--effects { transition: .5s all ease-in-out; }
Hey Stephanie, sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you? If not let me know and I'd be glad to help
I have follow the set up but not showing a second logo when scrolling the page and i have not using pro elementor show i can do this . help me for this how to change the logo when scroll the page ?
Although this video was posted 4 years ago it still works as smoothly in 2024 as it did when first posted. Excellent video thank you
Thank for this video ! It helped me on a lot of website project 😊Here the summary to help viewers :
00:00 - Introduction
00:30 - Requirements
00:51 - Menu creation
3:49 - Adding logos
5:13 - CSS for logo
7:29 - CSS for background
11:04 - Explanations
13:18 - Conclusion
This man just saved my sanity.
The tips on changing the logo, font colour, background etc after scrolling was awesome.
Virtual fist-bump with a high-five, and a nod.
Haha cool man. Much appreciated!
Hello Jeffrey!! Thank you SO MUCH for this tutorial, I implemented everything you explained and it works almost perfectly. I did run into an issue I'm wondering if you've noticed. If I adjust the width of the browser in and back out, the menu will stay at the width and not respond dynamically. It would be SO amazing if you happened to have a fix. I just loved your approach and personality in this video!
Did you find a fix for this. I also encountered the same problem
@LytboxStudio Having the exact same problem which roots in the css. When I comment it out its working again. Is there a chance you can take a look into it?
I just found an extra letter in my css which didn't belong there. I'd advise you to debug your css @SaraCarozzolo and @kufraybenson
Thank you. As one last extra, i add the fade in effect on both images and the images then transmissions nicely between the two states.
It's much more effective than the other tutorials I've seen before
Thanks Israfil I appreciate that!
I wonder if it would be possible to do it without Elementor Pro, using e.g. WP code and entering additional java script codes.What do you think about it?
What I'd love to know is if there is a way to activate the d-logo, etc and all other font/background changes when you hover over an item (say the menu) - so it's not just activated by the Scroll.
To clarify - if we scroll 100px the background, logo, font changes - excellent.
But if it could change by us hovering over the menu as well, without scrolling on the screen - then that would be great!
That can absolutely be done with some CSS and a good idea. Maybe I'll make a short video on that. Just added it to my video creation list. Thanks for the dope idea!
Wicked!
Thanks for this tutorial. I needed to make the logo show/hide on scroll. With a little tweaking to the css, I was able to achieve what I was going for. Your tutorial provided just what I needed.
Hey! This is AMAZNG and I have it working, however I am having an issue where it's forcing the bar into a boxed area (instead of full width) sporadically. Any ideas? It will be full screen most of the time and then randomly it will go boxed and leave the sides open
All I can say is I am happy to have discovered your Chanel. Looking to watching your other videos
Thanks Susan! So glad to hear
I've done this technique in many different ways. But this is by far the simplest and most effective way, well done and keep up the good work
Joel Antwi thanks you so much!!!
This is the only video that worked out for me! Thank you!
Thanks for the clear and concise intructions. One thing - I'm using an icon box widget for the menu which will action a pop up menu. I've added css of sticky-menu-items to it, however the colour chaneg css doesn't seem to work. Any help much appreciated!
Exactly what I was looking for! I can see you have a dynamic option next to "effects offset". Is it with another plugin? I'm trying to get the colour/logo switch to happen at a specific point on the page: the moment when the header scrolls past a fullscreen splash image that is at the top of the site and set to "fit to screen". Thanks!
Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you?
Thank you!! This worked perfectly.
Hi! How to add trasition to two slightly different images using the css? So that they change in a slow manner. Thanks!
That would take a bit more CSS and styling. I don't think I can give an answer here
Thank you so much! I want to know if there is anyway to also make the header from transparent to color by just hovered it?
Curious to know what plugin you are using that allows the dynamic tag on the effects offset?
Dynamic Content. I still haven’t played with it yet to see how it could be useful. Maybe I’ll geek out on it soon to see what is can do
... thank you so much !! Excellent video :)
For me it's a two and half year old video, however, it´s one of the best videos, for this purpose, that i've seen so far. Thanks!
One question, would be with css that i would be able to make it shrink when scrolling down? If so, is it just by setting some kind of with or percentage to the logo?
thank you sir you resolved my little problem today .. Great work done Sir.
Many Thanks 🙏💜
What if i need to change the color of the drop downs as well? Any advice? Thank you!
I'll have updates soon with more color changes on scroll
@@LytboxStudio This is awesome! My only issue is with the dropdowns. When I scroll down, my dropdown hover background color is the same color as my dropdown hover text color. Is there any dropdown css to change only the dropdown hover text color? Thanks in advance!!!
I was looking for this for years!!!! Man you saved my life and I learned a new skill! Thank you very much! if I could subscribe 10 times I would!
So glad to hear. Thanks! 🙏
Hey, what are the advantage of doing it with css only instead of the plugin
? Can you please explain...Thanks.
Technically, we are creating this effect with just CSS. The Elementor plugin does not have this effect as an option. But they do give options to add effects to sticky elements with just CSS. If you were to create this effect or any sticky effect with pure code and no plugin, you would need both CSS and JS. I think the advantage goes to using Elementor on this one.
@@LytboxStudio
yes that's right, but I meant a plugin especially for this sticky header effect. There a lot of plugins for which you can create such effects completely without css. And if you constantly use plugins for any different effects, your Dashboard would pile up with quite a few plugins and this would lead to other problems such as Slow down the page and security issues...is that correct? Thank you in advance.
so amazing!!! I wanted so much such a header! Glad, I found you! 🤩
Thank You So Much. This video helped me a lot. You are the best.
Thank you so much! We wanted to do exactly that effect for a client's website and I was thinking... oh man, do I need to do javascript? But then my brain worked and I thought, that MUST be doable in Elementor with some CSS. After some googling and a few minutes later, I found your AMAZING tutorial. Thank you again so much. You have my subscription!
Many Thanks 🙏💜
It really jumps from one to the other (obviously). What would be a better way to smooth the transition?
Woooah Jeffrey - another great video.! Thanks very much!
Is it possible to make a logo change from one image to another AND make it shrink as described in one of your other fantastic guides?
It is. The technique in the video is actually using 2 different images for the logos, a dark logo image, and a light logo image. You can change your images to any you choose
@@LytboxStudio is it possible to make this effect a way smooth, not just a pop up? Thank you so much!
Muchas gracias, me sirvió mucho su ejemplo, saludos desde Santiago de Chile
¡Hola, muchas gracias! ¡Grandes desde Tailandia!
I just got the requirement for the same and your video did the perfect job. Thanks a lot😍
So glad to hear!
Really great vid thank you! I have my cart, account and search icons on my sticky header but I’m unsure of how to change the code so that the colour change applies to them also? I’m a newbie so sorry if this is a simple thing but any advice would be much appreciated!
If you can share a link I can send a quick css snippet
This is a great video and has helped me immensely. some of my pages on my new site have a second sticky menu working as a submenu - is there a way I can ensure that this only applies to my header and not all sticky items?
Thank you so much, this is Great!!! Just one question please, how i can set color of active munu?
Not a problem. Try this out:
/*changes the active menu item color on scroll*/
.elementor-sticky--effects .sticky-menu-items ul li .elementor-item-active {
color: /*add your color here*/!important; /* edit here to change the active menu item text color for sticky header */
}
Easy to follow, now I could do so much with it and i'll use this technique so much.
So glad to hear! Thanks 🙏
Very cool , Jef 😍 you know.... what I like from this video than others? That you explain each the css function so I can learn better why you use that css code... Very useful for beginner like me 😁👍
Thanks Clement!
Awesome vid, man! Thanks for all the help! You just got yourself a new sub!
Thanks Luis! Much appreciated
Great video! Helped me a lot! However, I have the divider enabled for my menu and the color of that is not changing with it. Any ideas how I can fix this?
It snaps to the new logo once I reach the pixels I chose in the effects offset. I've played with the transition timing; I just can't get it to smoothly transition.
Any tips?
Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you? I have plans for an updated tutorial with the new versions of Elementor and will have a fix for this.
Hi Jeff, many thanks for your video as I made it work! I was looking to apply this effect but surprised that I couldn't find a decent tutorial... until now!
Just one quick concern: I applied the background colour to the background header on scroll. However, it's also applying this colour effect to other parts on the website (headings, html blocks...) which also are sticky. Any idea on how to solve that? Many thanks!
Nacho Segura thanks mate. Glad to hear it worked! If you are using multiple sticky sections then need to use classes. Try this: Add a class to your sticky navbar section. And instead of just adding the .elementor-sticky-effects combine the classes. It should look like this - .elementor-sticky-effects.your-sections-class without any spacing. Let me know if this works. Cheers
@@LytboxStudio Many thanks mate! It worked 👍
Hey Jeff! This tutorial helped me so much!!
Quick question, if I want to apply the fading transition effect to the dark logo as well, so it doesn't switch instantly, what CSS command should I add to the code?
Sorry. I was actually able to fix this by simply applying a fade-in entrance animation to the dark logo in the Motion Effects tab. Nice!
Sorry I missed your comment. It slipped by me. Nice fix! I didn't think of that. I'll use that next time. Cheers!
This is by far the best tutorial I have followed for a long time. thank you. Just one question: I add a hover effect on my menu bar. When transparent background and white text I can hover over it and it turns yellow. the way I want it.
When scrolling and header turns sticky, the text changes to grey (what I want) but I loos my hover effect yellow. Is there a CSS code I could add to keep the yellow hover effect over the menu?
thank you so much in advance!
Thanks for your comment! I think I would need to check out your site to send a correct CSS snippet. If you can leave a link here I can check it out. Or if you want to keep your link private, you can DM my in my Instagram - instagram.com/lytbox_co/
@@LytboxStudio thanks heaps. I will message you.
@@LytboxStudio hi lytbox Digital, just message you on Instagram again with another issue I have on this effect. It's working but I need to remove a background overlay while scrolling. And the snip I created doesn't work. I sent it to you via Instagram with the page domain etc. would so much appreciated if you could have a quick look at it. Thank you so much.
@@livibig I just messaegd you back on IG with a CSS snippet. I hope it helps!
This is such a great tutorial! Thank you! You've explained each step so well! I wanted to asked is there a way to make the transition more smooth?
Thank you so much! There is. Where you see 'transition: .5s all ease-in-out;' this controls the transition. the .5s is where to change the transition speed. The 's' stands for seconds. So right now it is .5 or half a second for the transition. All you need to do is change the .5 to something higher to slow down the transition. On thing is this is not working on the logo. I will add a fix for the logo transition soon.
@@LytboxStudio Did we ever find a fix for the logo transition?
@@kaizendigital2544 I was doing some testing and found you can use multiple elements.
.d-logo {
height: 0;
opacity: 0;
overflow: hidden;
}
/* SWITCHES LOGO ON SCROLL */
.elementor-sticky--effects .d-logo {
opacity: 1;
transition: .3s all ease-in-out;
height: auto;
}
@@kaizendigital2544 yes, click on image and set motions effects in advanced to fade in on both 🤙
This channel will blow up
That would be great!!!🤞
Thanks for this Great tutorial. Following your instructions there are two issues I still cannot overcome:
⁃ When I change the menu on scroll, I cannot find a way to change colors on the link (menu item
. What works for the first menu doesn’t work for the second one.
⁃ For the mobile or tablet design, I cannot change the color of the hamburguer icon menu.
I you have any advise on this I will appreciate your help on this.
Best,
Thanks and sure, there is a way to change those.
/*change color to the mobile menu toggle*/
.elementor-sticky--effects .sticky-menu-items i {
color: /*add your color here*/!important;
}
/*add color to the background of mobile toggle*/
.elementor-sticky--effects .sticky-menu-items .elementor-menu-toggle {
background: /*add the background color here or add transparent for no background color*/!important;
}
And for the menu item links I am guessing you mean the hover? If so try this:
/* CHANGES THE TEXT HOVER COLOR ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a:hover {
color: #333!important; /* edit here to change your text color for sticky header */
}
Exactly what I was looking for! Thanks!
Thank you so much for this tutorial! Just like Livia i have a hover effect on my menu but when i start scrolling i also lose my hover effect! Do you know how to fix that?
I have found for some hovers, we need to add the hover with CSS. If you could share your site's link here I can send you the right CSS for the hover. Or you can share with me on my Instagram - instagram.com/lytbox_co/
Hi, This CSS snipet works great, however when it switches to mobile or tablet view the hamburger icon is still white. In the header, I've also added social media icons. The color of these doesn't change either. How can I fix this?
Here's how to change the toggle color and the background to the hamburger toggle:
/*change color to the mobile menu toggle*/
.elementor-sticky--effects .sticky-menu-items i {
color: /*add your color here*/!important;
}
/*add color to the background of mobile toggle*/
.elementor-sticky--effects .sticky-menu-items .elementor-menu-toggle {
background: /*add the background color here or add transparent for no background color*/!important;
}
Love it! Great content and super useful tutorial.
Great tutorial! But what if I also wanted to decrease the height of the head when I change the logo?
thanks
I have meant to make this video and will get it out soon. This can be done by either shrinking the logo size or reducing the top and bottom padding of the section the nav is in on scroll with a little bit of CSS. I'll have this one out very soon!
Hello,
Thanks so much this saved me a lot of time..
I was doing the CSS content:URL(); option but this seems so much easier and better.
Thanks again/
Thanks! Glad it helped!
nice tutorial! by the way for some who cannot make the light logo disappear the CSS is just missing a comma to fix it! nice tutorial thank you very much!
Many Thanks 🙏💜 I appreciate the heads up and adjusting the CSS!
Great video, made this so simple. Would you be able to share the CSS Snippet to change the hamburger colour on scroll?
Sure I can, but would need a link to your site. You can share here or hit me up on IG - instagram.com/lytbox_co/
Bro you saved my day man! Thank You brother!!
So cool man, thanks!
Please tell me how i change the icon color when sticky header scroll down
Hey mate, I plan to make an update to this video coming up shortly and will add icon colors to it.
Has anyone addressed how to change the background color above the header specifically on Safari, mobile version? That color is inheriting the background page color instead of the header background color.
Man, I struggling with this today and you show up. Thank you.
Happy to help Thanks!
I like the simplicity, but on mobile this pushes the logo down together with the menu dropdown. Did I miss something?
Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you?
Hey Jeff! This is just what I have been looking for, well explained... You have a new suscriber.
The only missing thing is... How can I shrink header height combined to all explained effects? (I don't want to shrink Logo)
Thank you so much!!!
Thanks for the sub! I appreciate it!
To change the header height without changing the logo size, you have to target the padding. This is actually on my list of upcoming videos. I have it pushed to the top. I will try to get it out asap. Thanks!
@@LytboxStudio Great! I'll be waiting for it. Thanks!
Thanks a lot! Awesome video. Works perfectly!
So glad to hear! Thanks 🙏
Thank you, that's exactly what I'm looking for!
So glad to hear thanks!🙏
Just the thing I was looking for!!!!
Thanks!
Thanks Partho!🙏
You're the best. And you have the best tutorial.
Thank you!:)
Everything that I’d been looking for. Thanks so much!
So glad!
Thank you for this GREAT tutorial! Do you have any idea how I can add a box shadow on scroll only so I can add a little separation to the header? Also is it possible to make the white background on scroll somewhat transparent? Thank you!
Thanks for this. It's helped me a lot!
Glad it helped! Thanks! 🙏
The Dislikers "Oh man! He revealed our fine secrets for free!
This video needs to removed!"
Thanks for this great video it helps a lot.
Haha its all good! 🤣
Great video! However, im having some issues here. The white logo along with the menu items doesn't appear. It only does when i scroll.
Sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you?
Exactly what I was looking for, straight to the point and well explained! Thanks!
Thanks Oliver I appreciate that!🙏
Great video! Thanks a lot! Working well!!!
Many Thanks 🙏💜
hi nice tutorial, i tried to put the widjet icon with a svg image but it doesn't work..how can i fix?
It could be a couple of causes. I have had times where icons did not show. Can you share a link so I can take a quick look
The dark logo just pops up below the light one, they are not changing. Please help!
Can you double-check that the d-logo and l-logo classes are in the image widgets? I think this may be the cause
Hi!
It seems my text won't change color!
Can you help me?
this no longer works with flexbox conatiners to my knowledge. Any Idea on how to make it work?
Amazing tutorial!!! I have followed your instructions and it worked perfectly on desktop mode, however on mobile mode the hamburger menu does not appear!! What I have to do?? Thank you in advance!
If your hamburger menu is disappearing then the css class used to hide the logo must be connected to your hamburger menu too. Can you check and see if the d-logo and l-logo classes are only on the image widgets and nowhere else
If you can share a link I can take a quick look
@@athinadimakopoulou9334 I took a look and looks like the icon is not loading for the mobile menu hamburger. Here is a quick Loom video to show what I see and hopefully help to get that fixed. As soon as the hamburger icon is showing I can share a CSS snippet to change the colors on scroll. Or another option, to not use the scrolling effects on mobile. www.loom.com/share/4c8ba938716045dfab635f7eecdaa77e
@@LytboxStudio I have already followed your instructions that you described me at the video but unfortunately nothing have changed! What I have to do? I can't thank you enough for your help!!!
@@athinadimakopoulou9334 sorry took so long to get back to you. I just took a look and seems like you fixed it. And your site is looking good
Works like a charm. Many thanks!
So glad to hear!
please show us how to change the menu icon in each section ? like having different color menu icon for each section when scrolling
I'll have more tutorials coming out every week and I got your request on my list! Thanks!
Just exactly what I need! Thanks mate!
I’m really glad to hear that thanks!!!
Thank you soo much for this, It was so simple to do
Glad it helped!
Thanks! I was looking for this
Glad to hear!
Hey Jeffrey, thank you for this. It's super well explained and easy. I'm getting a little issue: when I scroll back up, the transition is instant and not smooth as when I scroll down. I tried different browsers and adding -webkit-, etc but it doesn't work. I also tried changing "all" for "top" and nothing. Also: I noticed that the menu items flickr a little bit when scrolling up, like they have an entrance animation (and I tried setting that to no, aswell). Hope you see this message, maybe I'm missing something. Thank you and keep up the good work!
Nevermind mate, I fixed it by adding a white background with #FFFFFF00 as color in the section style. Cheers!
Hey Martin, that's great and thanks for sharing that fix! I think a few others had the same issue. Whenever someone does I can share you fix. Much appreciated!
Thank you for the help!!
You got it! Thanks
Hi, awesome tutorial. Thank you on this. It helped a lot. Is there a chance that we can bring it one stept further? What about a shrinking sticky-menu bar?
Great suggestion! And that's already on my list of upcoming vids. Hope to have it out soon!
Thank you very much, it works perfectly fine!!
Do you know how I can change the header from sticky to fixed when it changes to the dark logo? It would help me a lot :)
That would take a new tutorial;)
Okay, hehe! Thanks for your answer.
Thank you very much. It worked!
Many Thanks 🙏💜
Very nice, great job. Anyone know how to change logo size on scrolling?ANY CSS trick?
Here’s a video I made showing just that - ua-cam.com/video/Yz-42qN8vf8/v-deo.html
@@LytboxStudio Ohhh, thanks great. Exactly what I meant
Hey Jeff! Thank you! You saved me!!!
Fiel Regis Thanks! I am so glad to hear that!
anyone know where I can copy the css from in this video?
David O'Mara it’s in the comment pinned to the top
nice one thanks
This worked perfectly in the Elementor studio bud, but doesn't work in the live site. I can see everything, both the light and the dark logo's in the live site and no transitions happening. Don't know if this is a glitch with the new latest Elementor update or what. Any ideas please???
DesignSoSimple the latest updates would not effect this. Can you share a link?
DesignSoSimple usually when something works in the Elementor editor but not on the live site it’s due to caching. Try clearing all cache first and check on incognito mode. If that doesn’t work, send me your sites link and I’ll take a look
I tried it but the logo isnt at the same position on scroll, dont get what i made wrong..
where i find the css code? Thanks
The CSS is pinned in the top comment:
/* HIDES THE DARK LOGO */
.d-logo {
display: none;
}
/* SWITCHES LOGO ON SCROLL */
.elementor-sticky--effects .d-logo {
display: inline-block;
}
.elementor-sticky--effects .l-logo {
display: none;
}
/* CHANGES THE BACKGROUND MENU ON SCROLL */
.elementor-sticky--effects {
background: #fff!important; /* edit here to change the background color for your sticky header*/
}
/* CHANGES THE TEXT COLOR ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a {
color: #333!important; /* edit here to change your text color for sticky header */
}
/* CONTROLS THE TRANSITION SPEED - KEEP ALL SAME SPEED TO HAVE A CLEAN EFFECT */
.elementor-sticky--effects .sticky-menu-items ul li a {
transition: .5s all ease-in-out;
}
.elementor-sticky--effects {
transition: .5s all ease-in-out;
}
Thanks man it worked !!!!!!!!! i sub and i like !! thanks agaiiiiiiin :D
That's awesome thanks!🙏
Got it to work! Thanks so much, Jeff!
Jackson Masiel were you able to get it to work?
@@LytboxStudio Yep!
✅ CSS Here 👇
/* HIDES THE DARK LOGO */
.d-logo {
display: none;
}
/* SWITCHES LOGO ON SCROLL */
.elementor-sticky--effects .d-logo {
display: inline-block;
}
.elementor-sticky--effects .l-logo {
display: none;
}
/* CHANGES THE BACKGROUND MENU ON SCROLL */
.elementor-sticky--effects {
background: #fff!important; /* edit here to change the background color for your sticky header*/
}
/* CHANGES THE TEXT COLOR ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a {
color: #333!important; /* edit here to change your text color for sticky header */
}
/* CONTROLS THE TRANSITION SPEED - KEEP ALL SAME SPEED TO HAVE A CLEAN EFFECT */
.elementor-sticky--effects .sticky-menu-items ul li a {
transition: .5s all ease-in-out;
}
.elementor-sticky--effects {
transition: .5s all ease-in-out;
}
=============================================
You will need Elementor Pro in order to create this feature. Here is a link to get the Pro version (open transparency, this is an affiliate link and appreciate the support ❤️:))
👉✅ elementor.com/pricing/?ref=4977&campaign=yt
Very good tutorial! Just cannot find the CSS Code at all? Can you post it or add it to a description?
Thanks and yah, I will copy and paste it to the description later today. Right now the CSS is in the comment pinned to the top
@@LytboxStudio Awesome Thanks! I also scrolled through all the comments and for me it isnt pinned :((
@@austinskillings4550 I just added the CSS to the description. I think pinned comments don't show all the time. Going forward I will make sure to add to the descrption
@@austinskillings4550 Here is the CSS - ✅ CSS Here 👇
/* HIDES THE DARK LOGO */
.d-logo {
display: none;
}
/* SWITCHES LOGO ON SCROLL */
.elementor-sticky--effects .d-logo {
display: inline-block;
}
.elementor-sticky--effects .l-logo {
display: none;
}
/* CHANGES THE BACKGROUND MENU ON SCROLL */
.elementor-sticky--effects {
background: #fff!important; /* edit here to change the background color for your sticky header*/
}
/* CHANGES THE TEXT COLOR ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a {
color: #333!important; /* edit here to change your text color for sticky header */
}
/* CONTROLS THE TRANSITION SPEED - KEEP ALL SAME SPEED TO HAVE A CLEAN EFFECT */
.elementor-sticky--effects .sticky-menu-items ul li a {
transition: .5s all ease-in-out;
}
.elementor-sticky--effects {
transition: .5s all ease-in-out;
}
For the text color change in the menu, that new color overrides the hover and active styles of the text to where it's only that new color :(
Hey Stephanie, sorry for the late reply, I was taking time off and back now. Were you able to find a fix and get it working for you? If not let me know and I'd be glad to help
Thank you, great tutorial!
You're very welcome!
I have follow the set up but not showing a second logo when scrolling the page and i have not using pro elementor show i can do this . help me for this how to change the logo when scroll the page ?
Are you using Elementor pro? If you follow step by step this will work. Have you added both logos and the CSS?
@@LytboxStudio i am not using pro version . please help me how to do this in normal elementor version
i have purchased theme in theme forest but not pro version . i have try to this logo changed when scroll the page.
@Avinash you will need to use Elementor pro. BTW, what is the name of the theme you are using?
@@LytboxStudio wp opal rehomes
thanks cracking as always thanks