How To Change Logos On Scroll With Elementor 2020
ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- ✨ Join us in the Lytbox Academy Community:
lytboxacademy.com/join-us/
Link to the code snippet 👉 lytboxacademy.com/how-to-chan...
/////
✨ Learn High-Level Web Design Skills With Me:
🟢 Master Elementor while learning web design skills:
lytboxacademy.com/design-with...
🟢 Learn powerful SEO in an easy-to-follow style for WordPress users and web designers:
lytboxacademy.com/seo-for-wor...
🟢 A step-by-step guide to building a WordPress Maintenance Business that results in high MRR:
lytboxacademy.com/maintenance...
🟢 Become a Lytbox Academy Pro Member:
lytboxacademy.com/the-academy/
/////
✨ My Recommended WordPress & Web Design Tools:
👉 The hosting I use:
Cloudways (use promo code LYTBOX for 30% off 3/months)
lytboxacademy.com/cloudways/
xCloud:
lytboxacademy.com/xcloud/
/////
👉 My WordPress Tools:
Elementor Pro:
lytboxacademy.com/elementor/
Breakdance Builder:
lytboxacademy.com/breakdance/
Bricks Builder:
lytboxacademy.com/bricks/
Crocoblock:
lytboxacademy.com/crocoblock/
SEOPress (the best SEO tool for WordPress!):
lytboxacademy.com/seopress
Perfmatters:
lytboxacademy.com/perfmatters
InstaWP:
lytboxacademy.com/instawp
WP Umbrella:
lytboxacademy.com/wp-umbrella
/////
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elemenorheaders #elementorlogo #elementorstickyheader elementor logo change - แนวปฏิบัติและการใช้ชีวิต
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!
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.
It's much more effective than the other tutorials I've seen before
Thanks Israfil I appreciate that!
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!
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.
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! 🙏
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!
Man, I struggling with this today and you show up. Thank you.
Happy to help Thanks!
so amazing!!! I wanted so much such a header! Glad, I found you! 🤩
Everything that I’d been looking for. Thanks so much!
So glad!
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 🙏💜
Thank You So Much. This video helped me a lot. You are the best.
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 just got the requirement for the same and your video did the perfect job. Thanks a lot😍
So glad to hear!
Awesome vid, man! Thanks for all the help! You just got yourself a new sub!
Thanks Luis! Much appreciated
Love it! Great content and super useful tutorial.
Exactly what I was looking for, straight to the point and well explained! Thanks!
Thanks Oliver I appreciate that!🙏
Exactly what I was looking for! Thanks!
Just the thing I was looking for!!!!
Thanks!
Thanks Partho!🙏
Easy to follow, now I could do so much with it and i'll use this technique so much.
So glad to hear! 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?
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!
thanks cracking as always thanks
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!
Just exactly what I need! Thanks mate!
I’m really glad to hear that thanks!!!
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?
Life saver!
Thanks a lot! Awesome video. Works perfectly!
So glad to hear! Thanks 🙏
Works like a charm. Many thanks!
So glad to hear!
Muchas gracias, me sirvió mucho su ejemplo, saludos desde Santiago de Chile
¡Hola, muchas gracias! ¡Grandes desde Tailandia!
Bro you saved my day man! Thank You brother!!
So cool man, thanks!
You're the best. And you have the best tutorial.
Thank you!:)
Thank you soo much for this, It was so simple to do
Glad it helped!
thank you sir you resolved my little problem today .. Great work done Sir.
Many Thanks 🙏💜
thank you, perfect
Thank you very much. It worked!
Many Thanks 🙏💜
Thank you bro !
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?
Great video! Thanks a lot! Working well!!!
Many Thanks 🙏💜
Thanks a lot my friend
Cooool, thanks,
Thanks for this. It's helped me a lot!
Glad it helped! Thanks! 🙏
Thanks! I was looking for this
Glad to hear!
This channel will blow up
That would be great!!!🤞
Got it to work! Thanks so much, Jeff!
Jackson Masiel were you able to get it to work?
@@LytboxStudio Yep!
Hey Jeff! Thank you! You saved me!!!
Fiel Regis Thanks! I am so glad to hear that!
Thanks man it worked !!!!!!!!! i sub and i like !! thanks agaiiiiiiin :D
That's awesome thanks!🙏
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?
Love it!! Exactly what I was looking for and SIMPLE TOO!
I'm really glad to hear that thanks!
Thank you for the help!!
You got it! Thanks
thanks!
Thank you, great tutorial!
You're very welcome!
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?
GREAT!
Thanks! 🙏
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 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 bro!
No problem! Many Thanks 🙏💜
beautiful!
Thanks:)
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
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
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!
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!
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 */
}
It really jumps from one to the other (obviously). What would be a better way to smooth the transition?
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 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/
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 🤙
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!
perfect!
Thanks 🙏
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
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.
thanks you a lot !!
You're welcome! 🙏
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/
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!
this no longer works with flexbox conatiners to my knowledge. Any Idea on how to make it work?
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 👍
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!
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!
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 */
}
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!
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! 🤣
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!
Hi!
It seems my text won't change color!
Can you help me?
I tried it but the logo isnt at the same position on scroll, dont get what i made wrong..
✅ 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
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.
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!!!
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
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!
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!
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;
}
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.
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?
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.
GRAZIE 3000
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, 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.
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