How To Change Logos On Scroll With Elementor 2020

Подписаться 24 тыс.

Просмотров 50 тыс.

50% 1

Link to the code snippet 👉 lytboxacademy.com/how-to-chan...
===================================
🟣 ////// Learn Powerful SEO for WordPress
lytboxacademy.com/seo-for-wor...
===================================
🟢 ////// Master Elementor with Better Designs
lytboxacademy.com/design-with...
===================================
🔵 ////// Learn to Build and Sell WordPress Maintenance & Care Plans
lytboxacademy.com/maintenance...
===================================
🏆 ////// Become a Lytbox Pro Member
lytboxacademy.com/the-academy/
===================================
🌟 ////// Personal 1-On-1 Elementor Training
tidycal.com/lytbox/elementor-...
===================================
////// The Hosting I use:
👉 Hostinger (Best for beginners & smaller budgets)
www.hostg.xyz/SHDX8
👉 Cloudways (Best for scaling web businesses)
www.cloudways.com/en/?id=485185
👉 RunCloud (Best for professionals)
runcloud.io/
////// WordPress Tools I use:
👉 Bricks Builder
bricksbuilder.io/
👉 Elementor
be.elementor.com/visit/?bta=4...
👉 Breakdance
breakdance.com/ref/390/
👉 Crocoblock
crocoblock.com/?ref=2021
👉 SEOPress Pro
www.seopress.org/?ref=854
👉 Perfmatters
perfmatters.io/?ref=1230
👉 WP Umbrella
wp-umbrella.com/?fpr=jeffrey83
👉 InstaWP
instawp.com/?via=jeffrey
Thank you for supporting my channel 🙏 - Jeffrey @ Lytbox
#elemenorheaders #elementorlogo #elementorstickyheader elementor logo change

Хобби

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 253

@websquadron 3 года назад

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.

@LytboxStudio 3 года назад

Haha cool man. Much appreciated!

@127gaelle Год назад

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

@sirenaalyce Год назад

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.

@JoelAntwi 3 года назад

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

@LytboxStudio 3 года назад

Joel Antwi thanks you so much!!!

@israfilhossain8662 3 года назад

It's much more effective than the other tutorials I've seen before

@LytboxStudio 3 года назад

Thanks Israfil I appreciate that!

@clementyo4526 4 года назад

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 😁👍

@LytboxStudio 4 года назад

Thanks Clement!

@leftofright 5 месяцев назад

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.

@hy.c5576 3 года назад

Everything that I’d been looking for. Thanks so much!

@LytboxStudio 3 года назад

So glad!

@rendrstudioco 8 месяцев назад

This is the only video that worked out for me! Thank you!

@ramonzeira 3 года назад

Man, I struggling with this today and you show up. Thank you.

@LytboxStudio 3 года назад

Happy to help Thanks!

@Xanthi_S 2 года назад

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!

@LytboxStudio 2 года назад

Many Thanks 🙏💜

@kumarharshvardhan9785 3 года назад

I just got the requirement for the same and your video did the perfect job. Thanks a lot😍

@LytboxStudio 3 года назад

So glad to hear!

@Jazzadicto 3 года назад

Awesome vid, man! Thanks for all the help! You just got yourself a new sub!

@LytboxStudio 3 года назад

Thanks Luis! Much appreciated

@marionpaolo319 2 года назад

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!

@LytboxStudio 2 года назад

So glad to hear. Thanks! 🙏

@mariabobert3500 Год назад

so amazing!!! I wanted so much such a header! Glad, I found you! 🤩

@parthosarkar5270 3 года назад

Just the thing I was looking for!!!! Thanks!

@LytboxStudio 3 года назад

Thanks Partho!🙏

@shafkatalvee 5 месяцев назад

Thank You So Much. This video helped me a lot. You are the best.

@susanngigi7599 2 года назад

All I can say is I am happy to have discovered your Chanel. Looking to watching your other videos

@LytboxStudio 2 года назад

Thanks Susan! So glad to hear

@Magestro-vz7nc Год назад

Love it! Great content and super useful tutorial.

@oliver_andrews 3 года назад

Exactly what I was looking for, straight to the point and well explained! Thanks!

@LytboxStudio 3 года назад

Thanks Oliver I appreciate that!🙏

@jo5hdavis Год назад

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!

@SantiagoHernandezhc Год назад

Exactly what I was looking for! Thanks!

@saminu 3 года назад

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/

@LytboxStudio 3 года назад

Thanks! Glad it helped!

@uibyade 3 года назад

Just exactly what I need! Thanks mate!

@LytboxStudio 3 года назад

I’m really glad to hear that thanks!!!

@montanajackman543 2 года назад

Easy to follow, now I could do so much with it and i'll use this technique so much.

@LytboxStudio 2 года назад

So glad to hear! Thanks 🙏

@justaguynamedleo Год назад

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?

@bennyre7915 3 года назад

Works like a charm. Many thanks!

@LytboxStudio 3 года назад

So glad to hear!

@kendrickunofficial1312 3 года назад

Thank you soo much for this, It was so simple to do

@LytboxStudio 3 года назад

Glad it helped!

@jstucks9928 2 года назад

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!

@LytboxStudio 2 года назад

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?

@andyking1508 2 года назад

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?

@aryanmadan7255 2 года назад

Thanks a lot! Awesome video. Works perfectly!

@LytboxStudio 2 года назад

So glad to hear! Thanks 🙏

@takatruong33 Год назад

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?

@ColonelJackery 3 года назад

Got it to work! Thanks so much, Jeff!

@LytboxStudio 3 года назад

Jackson Masiel were you able to get it to work?

@ColonelJackery 3 года назад

@@LytboxStudio Yep!

@dhanikaamarasekera9110 3 года назад

Bro you saved my day man! Thank You brother!!

@LytboxStudio 3 года назад

So cool man, thanks!

@darynlarson1608 2 года назад

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!

@pimdemmer7114 3 года назад

Thanks! I was looking for this

@LytboxStudio 3 года назад

Glad to hear!

@SaraCarozzolo 6 месяцев назад

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!

@kufraybenson 2 месяца назад

Did you find a fix for this. I also encountered the same problem

@MinimalRichi 2 месяца назад

@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?

@MinimalRichi 2 месяца назад

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

@fielregis6074 3 года назад

Hey Jeff! Thank you! You saved me!!!

@LytboxStudio 3 года назад

Fiel Regis Thanks! I am so glad to hear that!

@soniafloreschipana5955 3 года назад

You're the best. And you have the best tutorial.

@LytboxStudio 3 года назад

Thank you!:)

@sarahpowell5662 3 года назад

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!

@LytboxStudio 3 года назад

If you can share a link I can send a quick css snippet

@MatrixLloyd 3 года назад

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?

@LytboxStudio 3 года назад

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

@hetiru 3 года назад

@@LytboxStudio is it possible to make this effect a way smooth, not just a pop up? Thank you so much!

@Iamhamxamirza 2 года назад

thank you sir you resolved my little problem today .. Great work done Sir.

@LytboxStudio 2 года назад

Many Thanks 🙏💜

@strikie05 3 года назад

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?

@strikie05 3 года назад

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!

@LytboxStudio 3 года назад

Sorry I missed your comment. It slipped by me. Nice fix! I didn't think of that. I'll use that next time. Cheers!

@hasaneraydin741 2 года назад

Thank you very much. It worked!

@LytboxStudio 2 года назад

Many Thanks 🙏💜

@joorchampi3346 2 года назад

Great video! Thanks a lot! Working well!!!

@LytboxStudio 2 года назад

Many Thanks 🙏💜

@wgm247 3 года назад

This channel will blow up

@LytboxStudio 3 года назад

That would be great!!!🤞

@gracegroenewald 2 года назад

Thanks for this. It's helped me a lot!

@LytboxStudio 2 года назад

Glad it helped! Thanks! 🙏

@dimofamo Год назад

Life saver!

@stuartibbotson7179 Год назад

thanks cracking as always thanks

@alanmendez.asesorinmobiliario 3 года назад

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!!!

@LytboxStudio 3 года назад

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!

@alanmendez.asesorinmobiliario 3 года назад

@@LytboxStudio Great! I'll be waiting for it. Thanks!

@ecdcustomerservice4418 3 года назад

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?

@LytboxStudio 3 года назад

Thank you so much! There is. Where you see 'transition: .5s all ease-in-out;' this controls the transition. the .5s is where to change the transition speed. The 's' stands for seconds. So right now it is .5 or half a second for the transition. All you need to do is change the .5 to something higher to slow down the transition. On thing is this is not working on the logo. I will add a fix for the logo transition soon.

@kaizendigital2544 2 года назад

@@LytboxStudio Did we ever find a fix for the logo transition?

@jackevangelides876 2 года назад

@@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; }

@leftofright 5 месяцев назад

@@kaizendigital2544 yes, click on image and set motions effects in advanced to fade in on both 🤙

@yerkobrowton3234 2 года назад

Muchas gracias, me sirvió mucho su ejemplo, saludos desde Santiago de Chile

@LytboxStudio 2 года назад

¡Hola, muchas gracias! ¡Grandes desde Tailandia!

@RCPSASTANDREW 2 года назад

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!

@LytboxStudio 2 года назад

Many Thanks 🙏💜 I appreciate the heads up and adjusting the CSS!

@lyuhakusho 3 года назад

Thank you for the help!!

@LytboxStudio 3 года назад

You got it! Thanks

@Gustavvo0 2 года назад

Thank you, great tutorial!

@LytboxStudio 2 года назад

You're very welcome!

@davidgershon261 3 года назад

Thank you so much, this is Great!!! Just one question please, how i can set color of active munu?

@LytboxStudio 3 года назад

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 */ }

@louh7200 Год назад

Thank you bro !

@nubenegra809 3 года назад

beautiful!

@LytboxStudio 3 года назад

Thanks:)

@MatichekYoutube Год назад

thank you, perfect

@keedp 3 года назад

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?

@LytboxStudio 3 года назад

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/

@nacho.segura 3 года назад

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!

@LytboxStudio 3 года назад

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

@nacho.segura 3 года назад

@@LytboxStudio Many thanks mate! It worked 👍

@websquadron 3 года назад

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!

@LytboxStudio 3 года назад

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!

@websquadron 3 года назад

Wicked!

@amine9156 3 года назад

Thanks man it worked !!!!!!!!! i sub and i like !! thanks agaiiiiiiin :D

@LytboxStudio 3 года назад

That's awesome thanks!🙏

@danielrudin425 3 года назад

Great video, made this so simple. Would you be able to share the CSS Snippet to change the hamburger colour on scroll?

@LytboxStudio 3 года назад

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/

@AlbertoVR Год назад

Cooool, thanks,

@curtisbaker7874 3 года назад

Curious to know what plugin you are using that allows the dynamic tag on the effects offset?

@LytboxStudio 3 года назад

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

@pashutbari 2 года назад

GREAT!

@LytboxStudio 2 года назад

Thanks! 🙏

@daviddobbing383 3 года назад

Love it!! Exactly what I was looking for and SIMPLE TOO!

@LytboxStudio 3 года назад

I'm really glad to hear that thanks!

@MartinAlejandro 3 года назад

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!

@MartinAlejandro 3 года назад

Nevermind mate, I fixed it by adding a white background with #FFFFFF00 as color in the section style. Cheers!

@LytboxStudio 3 года назад

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!

@ronaldmoya3378 Год назад

Thanks a lot my friend

@jensbayer5337 2 года назад

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?

@LytboxStudio 2 года назад

Great suggestion! And that's already on my list of upcoming vids. Hope to have it out soon!

@daviduarte22 3 года назад

perfect!

@LytboxStudio 3 года назад

Thanks 🙏

@thecreativedonut7207 Год назад

It really jumps from one to the other (obviously). What would be a better way to smooth the transition?

@faksiu 3 года назад

Hi! How to add trasition to two slightly different images using the css? So that they change in a slow manner. Thanks!

@LytboxStudio 3 года назад

That would take a bit more CSS and styling. I don't think I can give an answer here

@user-tf7hh4rf9m Год назад

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?

@jean-sebastienvalderrama8404 3 года назад

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,

@LytboxStudio 3 года назад

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 */ }

@dnssolution1280 2 года назад

Thanks bro!

@LytboxStudio 2 года назад

No problem! Many Thanks 🙏💜

@KinottoIt Год назад

thanks!

@maurizioriccomagno7932 3 года назад

Great tutorial! But what if I also wanted to decrease the height of the head when I change the logo? thanks

@LytboxStudio 3 года назад

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!

@gonbanchero 3 года назад

thanks you a lot !!

@LytboxStudio 3 года назад

You're welcome! 🙏

@livibig 3 года назад

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!

@LytboxStudio 3 года назад

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/

@livibig 3 года назад

@@LytboxStudio thanks heaps. I will message you.

@livibig 3 года назад

@@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.

@LytboxStudio 3 года назад

@@livibig I just messaegd you back on IG with a CSS snippet. I hope it helps!

@kaikaiii7956 2 года назад

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 :)

@LytboxStudio 2 года назад

That would take a new tutorial;)

@kaikaiii7956 2 года назад

Okay, hehe! Thanks for your answer.

@gaiaeichenberger852 3 года назад

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?

@LytboxStudio 3 года назад

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; }

@namechange90 2 года назад

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?

@LytboxStudio 2 года назад

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.

@ambiroma822 2 года назад

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.

@LytboxStudio 2 года назад

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?

@karenmajetic1776 2 года назад

What if i need to change the color of the drop downs as well? Any advice? Thank you!

@LytboxStudio 2 года назад

I'll have updates soon with more color changes on scroll

@wedowebstuff 2 года назад

@@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!!!

@thats.secret 3 года назад

Hey, what are the advantage of doing it with css only instead of the plugin ? Can you please explain...Thanks.

@LytboxStudio 3 года назад

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.

@thats.secret 3 года назад

@@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.

@MrNoScore23 3 года назад

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.

@LytboxStudio 3 года назад

Haha its all good! 🤣

@robertcarter8889 Год назад

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.

@athinadimakopoulou9334 3 года назад

Amazing tutorial!!! I have followed your instructions and it worked perfectly on desktop mode, however on mobile mode the hamburger menu does not appear!! What I have to do?? Thank you in advance!

@LytboxStudio 3 года назад

If your hamburger menu is disappearing then the css class used to hide the logo must be connected to your hamburger menu too. Can you check and see if the d-logo and l-logo classes are only on the image widgets and nowhere else

@LytboxStudio 3 года назад

If you can share a link I can take a quick look

@LytboxStudio 3 года назад

@@athinadimakopoulou9334 I took a look and looks like the icon is not loading for the mobile menu hamburger. Here is a quick Loom video to show what I see and hopefully help to get that fixed. As soon as the hamburger icon is showing I can share a CSS snippet to change the colors on scroll. Or another option, to not use the scrolling effects on mobile. www.loom.com/share/4c8ba938716045dfab635f7eecdaa77e

@athinadimakopoulou9334 3 года назад

@@LytboxStudio I have already followed your instructions that you described me at the video but unfortunately nothing have changed! What I have to do? I can't thank you enough for your help!!!

@LytboxStudio 3 года назад

@@athinadimakopoulou9334 sorry took so long to get back to you. I just took a look and seems like you fixed it. And your site is looking good

@designsosimple2269 3 года назад

This worked perfectly in the Elementor studio bud, but doesn't work in the live site. I can see everything, both the light and the dark logo's in the live site and no transitions happening. Don't know if this is a glitch with the new latest Elementor update or what. Any ideas please???

@LytboxStudio 3 года назад

DesignSoSimple the latest updates would not effect this. Can you share a link?

@LytboxStudio 3 года назад

DesignSoSimple usually when something works in the Elementor editor but not on the live site it’s due to caching. Try clearing all cache first and check on incognito mode. If that doesn’t work, send me your sites link and I’ll take a look

@pablotrochez8507 3 года назад

The dark logo just pops up below the light one, they are not changing. Please help!

@LytboxStudio 3 года назад

Can you double-check that the d-logo and l-logo classes are in the image widgets? I think this may be the cause

@austinskillings4550 3 года назад

Very good tutorial! Just cannot find the CSS Code at all? Can you post it or add it to a description?

@LytboxStudio 3 года назад

Thanks and yah, I will copy and paste it to the description later today. Right now the CSS is in the comment pinned to the top

@austinskillings4550 3 года назад

@@LytboxStudio Awesome Thanks! I also scrolled through all the comments and for me it isnt pinned :((

@LytboxStudio 3 года назад

@@austinskillings4550 I just added the CSS to the description. I think pinned comments don't show all the time. Going forward I will make sure to add to the descrption

@LytboxStudio 3 года назад

@@austinskillings4550 Here is the CSS - ✅ CSS Here 👇 /* HIDES THE DARK LOGO */ .d-logo { display: none; } /* SWITCHES LOGO ON SCROLL */ .elementor-sticky--effects .d-logo { display: inline-block; } .elementor-sticky--effects .l-logo { display: none; } /* CHANGES THE BACKGROUND MENU ON SCROLL */ .elementor-sticky--effects { background: #fff!important; /* edit here to change the background color for your sticky header*/ } /* CHANGES THE TEXT COLOR ON SCROLL */ .elementor-sticky--effects .sticky-menu-items ul li a { color: #333!important; /* edit here to change your text color for sticky header */ } /* CONTROLS THE TRANSITION SPEED - KEEP ALL SAME SPEED TO HAVE A CLEAN EFFECT */ .elementor-sticky--effects .sticky-menu-items ul li a { transition: .5s all ease-in-out; } .elementor-sticky--effects { transition: .5s all ease-in-out; }

@shammakh44 2 года назад

please show us how to change the menu icon in each section ? like having different color menu icon for each section when scrolling

@LytboxStudio 2 года назад

I'll have more tutorials coming out every week and I got your request on my list! Thanks!

@andyfinney_at_large Год назад

this no longer works with flexbox conatiners to my knowledge. Any Idea on how to make it work?

@ALESSTIG 3 года назад

hi nice tutorial, i tried to put the widjet icon with a svg image but it doesn't work..how can i fix?

@LytboxStudio 3 года назад

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

@brianlichty 2 года назад

I like the simplicity, but on mobile this pushes the logo down together with the menu dropdown. Did I miss something?

@LytboxStudio 2 года назад

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?

@stephanieclark9049 2 года назад

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 :(

@LytboxStudio 2 года назад

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