🔥Here are CSS and the link to get Elementor Pro (I am an affiliate and appreciate your support 😊) elementor.com/pricing/?ref=4977&campaign=yt 👨💻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; }
You all prolly dont give a damn but does any of you know of a tool to get back into an Instagram account?? I somehow lost the password. I would appreciate any help you can offer me!
@Hezekiah Tripp i really appreciate your reply. I found the site thru google and im in the hacking process now. Seems to take a while so I will reply here later with my results.
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.
Great video man, really helped me out trying to figure this out! Big shout out to providing the snippet of CSS to help us out as well. Keep up the amazing work!
I do have plans to redo this tutorial including mobile. My suggestion is if using a sticky header on mobile to keep it minimal and make sure it's not taking up too much space at the top. Some phones are small.
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!
Good question, I call those promo bars and I use them a lot in my designs. There are a couple ways to do this: 1. Add a section (container) on top of your header section. Use that for your promo bar and set to sticky so the promo bar only sticks 2. Use an add on that has an ‘Announcement’ widget. The announcement widgets have the option to click off on the promo bar and hide it. Personally I go with option 1 as I do t like adding add ons if I don’t have to. But if you already are using an add on, check and see if they have announcments
@@LytboxStudio thank you so much for taking the time to reply, really appreciate it! Will try opt 1 right now to see how it goes. Keep making this kind of content, is very useful!!!
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?
Hey Niamh, there are 2 ways to do this and depends on what works best for your site: 1. Use a behave too margin for the banner on each page. 2. Only use the negative margin on the header section to pull all pages up. I usually try to use option 2 because it’s less work and easier but for some sites with more complex layouts, blogs, product page etc. it is best to adjust per page.
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.
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!
Another one of those helpful video, didn't know this feature is possible...gonna try it out in the current websites..also the video edits looks amazing and dope mate...what software are u using if u want to share with us and we can learn some videography too from you ...next niche. ;) ? 🔥🔥💥
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?
Hello Mr. Lytbox, great tutorial and is working very well, great work, thank you for that! I do have a question. If my page does not have a banner with color, how can I add an initial color to the header before the transition? I thought about placing a section with color behind it, but sounds clumsy. I would appreciate any help in advance.
really thx! it work perfectly with the menu-nav, but I have other elements in the header (like buttons) and they seems to be inaffected by this css rule and became trasparent on the color switch. How can I add them to the css instructions?
Very cool, thank you. But lets say, in each section so evry section is 100 VH . So if i scroll down to another section iw ant this color and i scrol to 3th section i want that color en when i scroll back it goes back
Hey Lytbox thanks for the tutorial!!! It works great on my site, however is there an easy edit to the CSS so that the background is only transparent for the homepage?
There's 2 ways to do this. You can create two headers with Elementor, one for the homepage and set the conditions. And another for the rest of the pages. And then with CSS. I would need to see your URL, but if you are using Hello Theme, the homepage has a class in the body tag .home that can be added to target just the homepage.
Hi!! This was amazing! However, I would like also to change the color of a HEADER and my social icons on scroll! The CSS Classes doesn't seem to work for those items in my header. Any advice? Thanks!
Hey Cybil sorry for the late reply. Did you find a solution yet? I have another video and in the description I have more CSS fixes for changing the text colors - ruclips.net/video/XZisV3Cgp34/видео.html&lc=UgxstucOrUMUjPn_J714AaABAg
Hi, great and expressive tutorials even for a developer like me. But I just want to say that you should put in a parent class before "..elementor-sticky--effects" like this ".elementor-location-header .elementor-sticky--effects" because else it will effect all sticky parts on the site like sticky sidebar or something else. And you maybe don´t want change background color on other parts then just the header. Else it is awsome.
Good tip. This will defiantly help those with more than 1 sticky section on a page. I'll be revamping this tutorial with the updated version of Elementor and will add this in it. Cheers!
Hi there! Thank you for this video! It works on all of my pages only the my landingpage where I have on the Snap scroll. Do you perhaps know how to fix this?
Hey thanks a ton for the tutorial. Everything is running smoothly except for the text color change. I've added "sticky-menu-items" to the nav text CSS ID section but still no luck. I'm building my site from scratch without a template. Any input is much appreciated!
That’s great to hear. And add the “sticky-menu-items” to the CSS Class, not the ID. My suggestion when building a site from scratch without a template is to use 1-3 other sites for inspiration. Try to replicate the parts on those site you want to use with your own brand styles. A secret in design - many high level designers do this!
@@LytboxStudio thank you! I'll check this out tomorrow. And I appreciate the insight! I've been designing sites for a few years, just always had a dev team to back it up. Figured I would take my site into my own hands. Thanks again
Thanks! The CLS is happening because of a caching plugin. The way to solve it is to find what cached files are above the fold and white list them so they don’t cache in your plugin. What caching plugin are you using?
I use the same and it happens all the time. If you can figure out what CSS file is being loaded late, you can whitelist it in WP Rocket. And for the css in this tutorial, if you put in in your Customizer CSS area, it won’t cache at all. I’d try that first.
@@LytboxStudio maybe I should just exclude that plugin's entire folder? I'll experiment on this! I'm the designer for an agency and we have this issue on most sites using transparent headers! Glad to know it's not just me!
Awesome video, great help. I want to have different effects offset that change the background colour and the logos. The changing of background colour I want to 100px and change of logo at 250px, is this possible and how is this done?
This can be done by combining a few effects. I have made a few videos here, some with the logos changing and shrinking, that should help - ruclips.net/p/PLzClSPWM30w9iavtW05Z_2xNKG15G1kp_
Hi! You help me so much! Thank you 🤗. Works very good in my menu but I have sections in my main menu, so when I scroll the dropdown menu doesnt change de background color. Can you help me with this please? (sorry for my english. I'm from Chile)
Hey Ivana, I am glad this helped. I will need a look at your drop down menu to give your the right CSS snippet. Can you share a link to your site? You can leave it here or you can DM me on my Instagram if you dont want to share your site public - instagram.com/lytbox_co/
I am struggling with the code for some reason. My main Nav bar I have a gradient background as the main header (transparent to a color L to R). Once I put the code in it takes the whole bar and turns it the color. Is there a way to get my Nav bar header to be the way I want it with the transparent to color gradient and then change to the color on scroll?
You can target the header only by giving the header section an class. Then add the class after the sticky class with no space. It should look like this: .elementor-sticky--effects.yoursectionclass Lets me know how this works for you.
Hey great tut, everything seems to work just fine. I was wondering if it's possible to make my site title change color as well? Any help would be appreciated!
Hey Anthony, sorry for the late reply. Did you find a solution yet? I have another video and in the CSS there's options to change text colors. See if that works for you. Cheers! ruclips.net/video/XZisV3Cgp34/видео.html&lc=UgxVc4iwxa_Ft8Xxg694AaABAg
Thanks a lot for the tutorial, it's perfectly working, you're doing an amazing job, I just have a problem, when I scroll, the test of the rest of my page is on the first plan, so it's over the header, that's a bit strange...
Hi Lytbox, thank you so much! Really easy and helpful. Do you know if it is possible to set the Effects Offset based on % or viewheight? I want to change the background color right after scrolling the full height background image. Hope you can help! Cheers!
Do you know of a way to keep .sticky-menu-items active color once you scroll? The nav menu is highlighting the page the user is on, but when scrolling, the highlight goes back to the inactive menu color
How would you target the underline of the active menu item? At the moment the underline seems to stick to its original color and doesn't switch colors together with the menu text. Thank you in advance.
Hy Lytbox, Love your tuto, and I already used successfully this CSS on several websites.. But I meet an issue on a new website. I think the CSS code is in conflict with an extension: Ultimate Addons for Elementor, Have you ever heard about it? I use this extension to make nicesection for posts...( cards display), but while activated, the menu changes do not work well while scrolling ....
Hey Marie, 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 haven't heard of this issue but I have plans to make a revamped version of this tutorial now that so much has changed with El and will test with UAE. Thanks! 🙏
hello! The code worked well thank you! I just have an issue regarding the hover and active text color in the navigation bar. I have my own colors set on them but they only remain the fixed color I inputted in the css once I scroll. Is there a way to fix this?
Hey Carlos, I did add updated CSS for the active and hover colors: If you have added these and they dont work, can you share a link to your site and I can take a quick look. /*updated changing mobile hamburger menu toggle and menu links on hover on scroll */ /*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; } /*CHANGES THE ACTIVE MENU ITEM 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 */ } /* CHANGES THE TEXT HOVER COLOR ON SCROLL */ .elementor-sticky--effects .sticky-menu-items ul li a:hover { color: /*add your color here*/!important; /* edit here to change your text color for sticky header */ } /* CHANGE UNDERLINE COLOR IN ELEMENTOR NAV MENU ON SCROLL */ .elementor-sticky--effects .sticky-menu-items ul li a::after { background-color: /*add your color for underline on scroll here*/; }
I want my header to get sticky when it reaches a certain section since it changes color there and blends in, using pixels doesn't work since they aren't the same on different monitors. For example on my 27 inch monitor, 835px is the sweet spot for me but on a 15 inch laptop it doesn't change color at the same place. Any idea?
That's a great idea and would be nice if there was a percentage option. Unfortunately, from what I know, the effects offset doesn't give more options. I think to you may need to explore other options and some customizations. I'll put in a request to their Github and if I hear anything I'll reply back to you here
Awesome - thanks, Jeffrey. Very simple. Very clever. Very well explained. But... using the exact code in your pinned comment, while the color changes smoothly on scroll down, when scrolling up it snaps instantly back to the original. I've tried playing with the ease-in-out settings but this still happens. What am I doing wrong?!
It could be a conflict of CSS or caching. If you can share your link I can take a quick look. If you don't want to share here, you can DM me on Instagram - instagram.com/lytbox_co/
🔥Here are CSS and the link to get Elementor Pro (I am an affiliate and appreciate your support 😊)
elementor.com/pricing/?ref=4977&campaign=yt
👨💻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;
}
You all prolly dont give a damn but does any of you know of a tool to get back into an Instagram account??
I somehow lost the password. I would appreciate any help you can offer me!
@Hezekiah Tripp i really appreciate your reply. I found the site thru google and im in the hacking process now.
Seems to take a while so I will reply here later with my results.
@Hezekiah Tripp it did the trick and I now got access to my account again. Im so happy!
Thanks so much you really help me out !
@Jamie Darius you are welcome xD
This is the easiest tutorial in terms of changing background color of header when scroll. Thanks very much!
I’m so glad to hear it was easy! Thanks 🙏
Thanks, I took the first 3 lines to just change my background color from blue to white and it worked!
Excellent!
Thank you so much! After hours of trying, I finally got a solution! This made my day!
Excellent!! very
concise, well explained and tangle free. Thank you for you time!!
Cristina Valencia Thanks so very much!:)
So simple and efective explanation ! Thanks a lot .
Many Thanks 🙏💜
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.
Thanks Sumit and I really appreciate your support!🙏
Clearly explained. Good stuff indeed. A question - How to change the logo image on scroll?
Thanks! it was very helpful. I'm making my first website with Elementor and Im lovin it
Many Thanks 🙏💜
Thanks,
Very useful video. I needed to make a transparent background become solid On Scroll. Working perfectly
Awesome you got it working thanks!
Thank you for the tutorial it is wery helpful, can you please add extra information how to manage pointer colour after scrolling?
Great video man, really helped me out trying to figure this out! Big shout out to providing the snippet of CSS to help us out as well. Keep up the amazing work!
Big thanks Shawn for this! Much appreciated 🙏
Hi Lytbox, thus looks like exactly what will help me. Where can I see the CSS code?
So helpful videos. Thanks a lot.
Much appreciated!🙏
Awesome video! So concise and helped me do exactly what I wanted to do!
Thank You! just what I was looking for!
So glad to hear!
Such an amazing tutorial, thank you for sharing your knowledge.
Rafael Mendoza García thank you. I appreciate it!
Oh my word, thank you! This is exactly what I needed!
Glad to hear!
Love you man. just fixed the headache.
Haha cool so glad to hear!
I have finally tried it after so long. Thanks!.
What's your take on making it for mobile? should I make it there too? Transparent then solid colors?
I do have plans to redo this tutorial including mobile. My suggestion is if using a sticky header on mobile to keep it minimal and make sure it's not taking up too much space at the top. Some phones are small.
Amazing video. Possible to also give a code to change button background and text color on scroll? that will be very helpful
Huge, huge help to me. Thank you.
Many Thanks 🙏💜
You made this easy. Thank you !
Nate White thanks mate!
Very helpful Thanks👍
Simply and effective, subscribed, thanks!
Great tutorial! Thank you!
Thanks! I appreciate that 🙏
Thats exactly what I was ooking for. Thank you!
Cool I'm so glad to hear!
FOr a background to sit behind a sticky menu you need to add negative margin> otherwise anything you add on a page sits below the menu? Great video!
Great Job!!! Buddy.
Thank you.
Thank you so much love from Pakistan 💕💕❤❤
Thanks for the help. It did work for me
Cool! Happy to hear!
Thank you so much! The tutorial was super easy to follow and understand. Really really appreciate it!
Thanks!🙏
Super helpful, thank you!
Glad it was helpful!
Extremely helpful - thank you!
Thanks a lot!
It works great :-)
So glad to hear. Thanks!
Worked for me, thanks!
So glad to hear thanks!
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!
Good question, I call those promo bars and I use them a lot in my designs. There are a couple ways to do this:
1. Add a section (container) on top of your header section. Use that for your promo bar and set to sticky so the promo bar only sticks
2. Use an add on that has an ‘Announcement’ widget. The announcement widgets have the option to click off on the promo bar and hide it.
Personally I go with option 1 as I do t like adding add ons if I don’t have to. But if you already are using an add on, check and see if they have announcments
@@LytboxStudio thank you so much for taking the time to reply, really appreciate it! Will try opt 1 right now to see how it goes. Keep making this kind of content, is very useful!!!
Thank you very much! It's really help! Awesome!
love the tutorial amazing job man.
Thanks! 🙏
So helpful!!!
Thanks! 🙏
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?
Hey Niamh, there are 2 ways to do this and depends on what works best for your site:
1. Use a behave too margin for the banner on each page.
2. Only use the negative margin on the header section to pull all pages up.
I usually try to use option 2 because it’s less work and easier but for some sites with more complex layouts, blogs, product page etc. it is best to adjust per page.
Great tutorial!
Thanks! 🙏
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.
Hey sorry for the late reply. Did you find the solution yet? The CSS is in the comment pinned to the top.
Thanks, super easy explanation👍
You saved me!!
So glad I can help. Cheers!
Great! Thanks you so much.
🤩
Thank you so much
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!
Sorry I missed your comment. It slipped by me. Did you figure it out yet? If not, do you have a link where I can check it out?
You saved my life thanks mate
thanks for the help
A great tutorial. THX :)
THANK YOU SOO MUCH SIR.. Been really helpful ..
Thanks, you help me a lot. 🇨🇴
Many Thanks 🙏💜
Great Video, thanks!
Maira Meirelles Thanks!
Another one of those helpful video, didn't know this feature is possible...gonna try it out in the current websites..also the video edits looks amazing and dope mate...what software are u using if u want to share with us and we can learn some videography too from you ...next niche. ;) ? 🔥🔥💥
Thanks Rajasv, I am using Screeflow. But still looking on improving the video and audio so I’m sure will be evolving through time. Many thanks mate!
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?
Great question but this would take a bit more custom work. Possibly some JS will need to be added. I do not think it can be done with just CSS.
@@LytboxStudio Do you have any idea how to do it, I would pay for the information.
Yess! thank you, thank you, thank you! Muiiito obrigado! Procurei muito por isso!
Haha thanks! So glad it helped!
Thank you man, this is great.
Glad it helped!
Thankyou sir, that's great tutorial
Great, you make my day! :-)
So glad to hear, thanks! 🙏
Awesome tutorial
Thanks!
Great video! How can I put an image instead of a simple colour at the backround as I scroll down?
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?
Cool... I will save this 😁
I got a few more coming including a video to combine all the effects
Hi
Nice video, it is very helpful.
May I know is it possible to change a logo as well when scroll down the menu ?
Most definitely it is! Here's another video I made showing how to change logos on scroll - ruclips.net/video/XZisV3Cgp34/видео.html
Hello Mr. Lytbox, great tutorial and is working very well, great work, thank you for that! I do have a question. If my page does not have a banner with color, how can I add an initial color to the header before the transition? I thought about placing a section with color behind it, but sounds clumsy. I would appreciate any help in advance.
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 so much!!
really thx! it work perfectly with the menu-nav, but I have other elements in the header (like buttons) and they seems to be inaffected by this css rule and became trasparent on the color switch. How can I add them to the css instructions?
Ivan Spinning sorry to reply so late. Did you find a fix? If not, can you share a link? I can take a look
Thank so much, for this video, already give you e like
Thank you so much! It’s well appreciated 😁🙏
Very cool, thank you.
But lets say, in each section so evry section is 100 VH . So if i scroll down to another section iw ant this color and i scrol to 3th section i want that color en when i scroll back it goes back
Hey Rafal, sorry for the late reply. I think will take some extra customizations, possibly a bit of JS. Did you fond a solution yet?
thanks
Lytbox
Question what happens if you wanted multiple colours
i.e top black ...then blue then red let's say
Hey Lytbox thanks for the tutorial!!! It works great on my site, however is there an easy edit to the CSS so that the background is only transparent for the homepage?
There's 2 ways to do this. You can create two headers with Elementor, one for the homepage and set the conditions. And another for the rest of the pages.
And then with CSS. I would need to see your URL, but if you are using Hello Theme, the homepage has a class in the body tag .home that can be added to target just the homepage.
Hi!! This was amazing! However, I would like also to change the color of a HEADER and my social icons on scroll! The CSS Classes doesn't seem to work for those items in my header. Any advice? Thanks!
Hey Cybil sorry for the late reply. Did you find a solution yet? I have another video and in the description I have more CSS fixes for changing the text colors - ruclips.net/video/XZisV3Cgp34/видео.html&lc=UgxstucOrUMUjPn_J714AaABAg
Hi, great and expressive tutorials even for a developer like me. But I just want to say that you should put in a parent class before "..elementor-sticky--effects" like this ".elementor-location-header .elementor-sticky--effects" because else it will effect all sticky parts on the site like sticky sidebar or something else. And you maybe don´t want change background color on other parts then just the header.
Else it is awsome.
Good tip. This will defiantly help those with more than 1 sticky section on a page. I'll be revamping this tutorial with the updated version of Elementor and will add this in it. Cheers!
This comment was super helpful to me, thank you!
Just the answer i was looking for!
Omg just what I was looking for.
Hi there! Thank you for this video! It works on all of my pages only the my landingpage where I have on the Snap scroll. Do you perhaps know how to fix this?
Thank you so much! This worked for the background but my text isn't changing. Any advice?
Hey thanks a ton for the tutorial. Everything is running smoothly except for the text color change. I've added "sticky-menu-items" to the nav text CSS ID section but still no luck. I'm building my site from scratch without a template. Any input is much appreciated!
That’s great to hear. And add the “sticky-menu-items” to the CSS Class, not the ID. My suggestion when building a site from scratch without a template is to use 1-3 other sites for inspiration. Try to replicate the parts on those site you want to use with your own brand styles. A secret in design - many high level designers do this!
@@LytboxStudio thank you! I'll check this out tomorrow. And I appreciate the insight! I've been designing sites for a few years, just always had a dev team to back it up. Figured I would take my site into my own hands. Thanks again
Thanks!
Great video, I seem to be failing on CLS when I use this method or any third party plugins. Any advise?
Thanks! The CLS is happening because of a caching plugin. The way to solve it is to find what cached files are above the fold and white list them so they don’t cache in your plugin. What caching plugin are you using?
@@LytboxStudio Hi thanks! I'm using WPRocket
I use the same and it happens all the time. If you can figure out what CSS file is being loaded late, you can whitelist it in WP Rocket.
And for the css in this tutorial, if you put in in your Customizer CSS area, it won’t cache at all. I’d try that first.
@@LytboxStudio maybe I should just exclude that plugin's entire folder? I'll experiment on this! I'm the designer for an agency and we have this issue on most sites using transparent headers! Glad to know it's not just me!
thanks!! very usefull :)
Do you know if there is any way similar to this to change menu color depending on section background-color?
Hey Ellie, I don't know of a simple way. It's possible but would need more customizations and possibly some JS. But maybe someone else here can answer
Awesome video, great help. I want to have different effects offset that change the background colour and the logos. The changing of background colour I want to 100px and change of logo at 250px, is this possible and how is this done?
This can be done by combining a few effects. I have made a few videos here, some with the logos changing and shrinking, that should help - ruclips.net/p/PLzClSPWM30w9iavtW05Z_2xNKG15G1kp_
Hi! You help me so much! Thank you 🤗. Works very good in my menu but I have sections in my main menu, so when I scroll the dropdown menu doesnt change de background color. Can you help me with this please? (sorry for my english. I'm from Chile)
Hey Ivana, I am glad this helped. I will need a look at your drop down menu to give your the right CSS snippet. Can you share a link to your site? You can leave it here or you can DM me on my Instagram if you dont want to share your site public - instagram.com/lytbox_co/
Thank you
I am struggling with the code for some reason. My main Nav bar I have a gradient background as the main header (transparent to a color L to R). Once I put the code in it takes the whole bar and turns it the color. Is there a way to get my Nav bar header to be the way I want it with the transparent to color gradient and then change to the color on scroll?
Great tutorial ;) thanks >>> But how can I make the sticky header with shadow? do you have CSS for that, please?
I have a sticky footer and it is also changing color and I don't want that. Is there a way to specify which sticky element to target in the CSS ?
You can target the header only by giving the header section an class. Then add the class after the sticky class with no space. It should look like this: .elementor-sticky--effects.yoursectionclass
Lets me know how this works for you.
@@LytboxStudio Yes it does, thank you !
@@JohnWick-eh3rt that’s great!
Hello, Thank you for the video. I can't find the css code in the comment.... Can you help me?
Can you look for the pinned comment. Sometimes it’s hard to find with YT UI
Question, when I turn on scroll snap, it seems to break this feature. Any ideas? This video was awesome btw!
Hey great tut, everything seems to work just fine.
I was wondering if it's possible to make my site title change color as well? Any help would be appreciated!
Hey Anthony, sorry for the late reply. Did you find a solution yet?
I have another video and in the CSS there's options to change text colors. See if that works for you. Cheers!
ruclips.net/video/XZisV3Cgp34/видео.html&lc=UgxVc4iwxa_Ft8Xxg694AaABAg
Thanks a lot for the tutorial, it's perfectly working, you're doing an amazing job, I just have a problem, when I scroll, the test of the rest of my page is on the first plan, so it's over the header, that's a bit strange...
Edit : The problem is only on the editor, the problem is not here on the "real" link ^^
Thanks and glad to hear you got it working!
Hello
How to add a CSS code for the color of the text in active link
How to change also the logo when scrolling
Thanks
Thank you
Hi Lytbox, thank you so much! Really easy and helpful. Do you know if it is possible to set the Effects Offset based on % or viewheight? I want to change the background color right after scrolling the full height background image.
Hope you can help!
Cheers!
Do you know of a way to keep .sticky-menu-items active color once you scroll? The nav menu is highlighting the page the user is on, but when scrolling, the highlight goes back to the inactive menu color
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?
Thanks buddy
You bet
best man!
Thanks! 🙏
How would you target the underline of the active menu item? At the moment the underline seems to stick to its original color and doesn't switch colors together with the menu text. Thank you in advance.
Try this out:
.elementor-sticky--effects .sticky-menu-items ul li a::after /* change the menu text color here*/ {
background: #fff!important;
}
How would I exclude the active page and hovered over item from the text color for the menu?
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?
Hy Lytbox,
Love your tuto, and I already used successfully this CSS on several websites..
But I meet an issue on a new website. I think the CSS code is in conflict with an extension: Ultimate Addons for Elementor, Have you ever heard about it?
I use this extension to make nicesection for posts...( cards display), but while activated, the menu changes do not work well while scrolling ....
Hey Marie, 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 haven't heard of this issue but I have plans to make a revamped version of this tutorial now that so much has changed with El and will test with UAE. Thanks! 🙏
@@LytboxStudio Hi, thanks for your feedback ! I fixed it, ... but I do not remember how and neither for which site it was actually :)
hello! The code worked well thank you! I just have an issue regarding the hover and active text color in the navigation bar. I have my own colors set on them but they only remain the fixed color I inputted in the css once I scroll. Is there a way to fix this?
Hey Carlos, I did add updated CSS for the active and hover colors: If you have added these and they dont work, can you share a link to your site and I can take a quick look.
/*updated changing mobile hamburger menu toggle and menu links on hover on scroll */
/*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;
}
/*CHANGES THE ACTIVE MENU ITEM 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 */
}
/* CHANGES THE TEXT HOVER COLOR ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a:hover {
color: /*add your color here*/!important; /* edit here to change your text color for sticky header */
}
/* CHANGE UNDERLINE COLOR IN ELEMENTOR NAV MENU ON SCROLL */
.elementor-sticky--effects .sticky-menu-items ul li a::after {
background-color: /*add your color for underline on scroll here*/;
}
@@LytboxStudio This is so helpful thanks for the great job!
I want my header to get sticky when it reaches a certain section since it changes color there and blends in, using pixels doesn't work since they aren't the same on different monitors. For example on my 27 inch monitor, 835px is the sweet spot for me but on a 15 inch laptop it doesn't change color at the same place. Any idea?
That's a great idea and would be nice if there was a percentage option. Unfortunately, from what I know, the effects offset doesn't give more options. I think to you may need to explore other options and some customizations. I'll put in a request to their Github and if I hear anything I'll reply back to you here
Awesome - thanks, Jeffrey. Very simple. Very clever. Very well explained. But... using the exact code in your pinned comment, while the color changes smoothly on scroll down, when scrolling up it snaps instantly back to the original. I've tried playing with the ease-in-out settings but this still happens. What am I doing wrong?!
It could be a conflict of CSS or caching. If you can share your link I can take a quick look. If you don't want to share here, you can DM me on Instagram - instagram.com/lytbox_co/