🔥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.
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!
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.
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!
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.
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?
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!
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?
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 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
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
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.
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 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?
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 - th-cam.com/play/PLzClSPWM30w9iavtW05Z_2xNKG15G1kp_.html
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...
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!!!
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?
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. ;) ? 🔥🔥💥
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/
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!
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 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 - th-cam.com/video/XZisV3Cgp34/w-d-xo.html&lc=UgxstucOrUMUjPn_J714AaABAg
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! th-cam.com/video/XZisV3Cgp34/w-d-xo.html&lc=UgxVc4iwxa_Ft8Xxg694AaABAg
Hi, this is exactly what i need, but for it does not working, my header is transparent and sticky, but nothing makes it change colors on scrolling, if someone knows how to solve, please share!! thanks
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
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.
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
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*/; }
![Warhammer 40k: Space Marine 2 | เพื่อจักรพรรดิ ! [ตอนเดียวจบ]](http://i.ytimg.com/vi/4M0ckYMA4-U/mqdefault.jpg)
🔥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,
Very useful video. I needed to make a transparent background become solid On Scroll. Working perfectly
Awesome you got it working 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 helpful videos. Thanks a lot.
Much appreciated!🙏
Thank you for the tutorial it is wery helpful, can you please add extra information how to manage pointer colour after scrolling?
Thank you so much love from Pakistan 💕💕❤❤
So simple and efective explanation ! Thanks a lot .
Many Thanks 🙏💜
Thanks! it was very helpful. I'm making my first website with Elementor and Im lovin it
Many Thanks 🙏💜
Very helpful Thanks👍
Thats exactly what I was ooking for. Thank you!
Cool I'm so glad to hear!
Oh my word, thank you! This is exactly what I needed!
Glad to hear!
Thanks for the help. It did work for me
Cool! Happy to hear!
Clearly explained. Good stuff indeed. A question - How to change the logo image on scroll?
Great Job!!! Buddy.
Thank you.
Such an amazing tutorial, thank you for sharing your knowledge.
Rafael Mendoza García thank you. I appreciate it!
Thank You! just what I was looking for!
So glad to hear!
Simply and effective, subscribed, thanks!
Love you man. just fixed the headache.
Haha cool so glad to hear!
Huge, huge help to me. Thank you.
Many Thanks 🙏💜
Extremely helpful - thank you!
Amazing video. Possible to also give a code to change button background and text color on scroll? that will be very helpful
You saved me!!
So glad I can help. Cheers!
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?
Great! Thanks you so much.
🤩
Awesome video! So concise and helped me do exactly what I wanted to do!
You saved my life thanks mate
You made this easy. Thank you !
Nate White thanks mate!
Worked for me, thanks!
So glad to hear 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!🙏
Thank you very much! It's really help! Awesome!
Great tutorial! Thank you!
Thanks! I appreciate that 🙏
Yess! thank you, thank you, thank you! Muiiito obrigado! Procurei muito por isso!
Haha thanks! So glad it helped!
Thanks, you help me a lot. 🇨🇴
Many Thanks 🙏💜
THANK YOU SOO MUCH SIR.. Been really helpful ..
Thanks, super easy explanation👍
thanks for the help
Super helpful, thank you!
Glad it was helpful!
Thank you so much
Thank you so much! The tutorial was super easy to follow and understand. Really really appreciate it!
Thanks!🙏
love the tutorial amazing job man.
Thanks! 🙏
So helpful!!!
Thanks! 🙏
Thanks a lot!
It works great :-)
So glad to hear. Thanks!
A great tutorial. THX :)
Thankyou sir, that's great tutorial
Great tutorial!
Thanks! 🙏
Thank you man, this is great.
Glad it helped!
Thank so much, for this video, already give you e like
Thank you so much! It’s well appreciated 😁🙏
Thanks!
Cool... I will save this 😁
I got a few more coming including a video to combine all the effects
Great, you make my day! :-)
So glad to hear, thanks! 🙏
Great Video, thanks!
Maira Meirelles Thanks!
Awesome tutorial
Thanks!
Thank you
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.
Thank you so much!!
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!
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.
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.
Thank you
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?
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
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.
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
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?
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?
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 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?
best man!
Thanks! 🙏
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 - th-cam.com/play/PLzClSPWM30w9iavtW05Z_2xNKG15G1kp_.html
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 - th-cam.com/video/XZisV3Cgp34/w-d-xo.html
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!
Thank you so much! This worked for the background but my text isn't changing. Any advice?
thanks
Lytbox
Question what happens if you wanted multiple colours
i.e top black ...then blue then red let's say
Thanks buddy
You bet
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
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?
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!!!
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?
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!
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/
Perfeito! Obrigada!
De nada!
Question, when I turn on scroll snap, it seems to break this feature. Any ideas? This video was awesome btw!
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!
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
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.
THank you, but where's the CSS?
It’s in the pinned comment
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
Great tutorial ;) thanks >>> But how can I make the sticky header with shadow? do you have CSS for that, please?
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?
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 - th-cam.com/video/XZisV3Cgp34/w-d-xo.html&lc=UgxstucOrUMUjPn_J714AaABAg
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!
th-cam.com/video/XZisV3Cgp34/w-d-xo.html&lc=UgxVc4iwxa_Ft8Xxg694AaABAg
Hi, this is exactly what i need, but for it does not working, my header is transparent and sticky, but nothing makes it change colors on scrolling, if someone knows how to solve, please share!! thanks
Ill be doing an updated tutorial very soon.
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
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;
}
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?
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!