How to Change the Logo, Menu, Text, Icons, Background, Colours on Scroll - Elementor Wordpress
ฝัง
- เผยแพร่เมื่อ 12 ก.พ. 2023
- This is How to Change the Logo, Menu, Text, Icons, Background, Colours on Scroll.
With some simple CSS you can change it all, and even shrink font size too on scroll.
Code: websquadron.co.uk/change-logo...
No Extra Plugin needed.
Book your 1-2-1 Consultation: websquadron.co.uk/socials
How to Change the Logo, Menu, Text, Icons, Background, Colours on Scroll - Elementor Wordpress
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
For anyone having different hover and active colors inside submenus and exclude them from changing color etc., you can change the CSS target of .menutextcolours to "ul > li.menu-item > a.elementor-item"
Imran, in just 10 days you became my go-to Elementor and SEO consultant. And my hero! You are not only good at Designing and Developing, but also a great communicator.
Thank you so much. I was working on my client and he needs it despartely. Because of you i was able to do that. Thank you
I like this kind of menu, I've used it before. However... for a website I'm just finishing off I used your mega menu method because there were so many pages to link to. Keep up the great work Imran.
Thank you Web Squadron!
Great content - as always! 🥰
Thanks for you tuto ! :)
U got it bang on when u said u thought I'd like this video.....I love it and it's perfect timing as well 💛💛💛💛
Wait till you see tomorrow’s video!
That’s a the big one!!
@@websquadron I caaaannn't wait! (I say this with a little jingle in my voice of course!) 🤣
But seriously, excited to see it Imran, love these videos. You really have no idea how much I look forward to your videos and how helpful they are and have been. So grateful that I have been on this TH-cam journey with you to see your progress and be a part of the amazing community that has been built because of it!
@@Melissa_Lawrence Make sure you have a bottle of wine ready for tomorrow's video... 12 hours from now :)
@@websquadron 🤣 love it! Sounds about right and something I'd regularly do! Sit with some wine and enjoy a good web Squadron video 🥰
This was usefull، thanks
very good！
thx so much 💟
Another great video from you! Thank you, man! :-) I'm looking for a solution to change the background color on scroll and specific other elements (headlines, texts and boxes), in order to make them compatible to the changed background. Is it possible to use this video for this also?
Amazing
Wait till you see tomorrow's video!!
Great video as usual! Thank you for sharing. Any tips for easing the transition between both logos so that the display isn't so hard (jumpy)?
You can add a transition delay but the jump back to the top is harsh :(
@@websquadron Gotcha. For my application, I used a logo that did not change size - just changed colors. I found that I could place the logos directly on top of each other (logo2 under logo1), set the opacity of logo1 to 1 and logo2 to 0. Then I am getting a much smoother fade between to two of them on scroll. I can see the challenge you have with the menu nav bar and logo2 reducing in size. Wish there were a simple way to ease the display value in CSS. That's why I've avoided it on my project by using the opacity and z index values. Thanks again for all the help you give on your channel. I always like, subscribe and follow! 😉🦊
Using this for a second time within a year's span so THANK YOU. Is this still best practice or has Elementor given us other built in options for sticky header options?
This is still the process to use
please continue with mobile version css... thank you for sharing
My Photoshop/Illustrator experience demands me to instantly rename elements in the Navigator (like you normally do with layers).
In this case I would suggest same name as the CSS Class for the ease of recognition/navigation. 🙂
Totally agree
This tutorial is just amazing and helpful ❤ I use hover color on nav menu when not scroll but the problem that i am facing is that when i scroll the hover color is not showing on nav menu and only the color code of css scroll on nav menu is showing
is there is any additional css code line that solve my problem
Really appreciated❤
Remove any other colour styling that you have applied from the style tab
Hey Web Squadron, I just watched your video and I must say that it was really informative and well-made. I loved your videos. I was wondering if I could help you edit your videos and also make highly engaging shorts for you to grow your business.
Thanks. You’d have to email me with thoughts on rates and what you offer :)
@@websquadron please check your email, I emailed you and I messaged you on your insta
@@m.ehtizan Thanks. I didn't see much that I couldn't do myself in Veed and other products. Thanks anyway.
@@websquadron what do you mean? I didn't get your point.
@@m.ehtizan There's nothing more to discuss as I don't see any value or benefit in what's to offer. I wish you good luck with your business interests but there's no need to get direct with statements like 'I don't get your point.'
Great tutorial, I've been watching many tutorial before but it won't work. But your code works like a charm. Now, I need to add box shadow to the header after it was scrolled. Can you help me, please?
I’ll have to think about that
This is great. To prevent the jumping of the logo (mentioned later in the video), would CSS transform scale properties work to ensure a smooth transition from 100px to 80px? Not sure how to write that CSS exactly, but just a thought.
I need to play with that more, but the image kept jumping as it's not something tat can be gradually done with clamp either.
@@websquadron did you try "height: auto;' on the logos? Strange my hamburger menu is disappearing on scroll.. :) fun
fixed it it was just jumping out of screen because of the container size..
@@websquadron I believe (not sure) the problem is with the non animatable features like display or visibility
Thts A Good CSS. I was wondering what you would use for a Blur Background on scroll. A transparent kind of Colourful Blur. If im making any sense.
You could use the frosted glass effect that I did in a tutorial a while ago
@@websquadron Okay I will look for it. Thank You.
Hi Imran, I'm trying this with the new mega menu but struggling with the menu text colour change ie not working probably different CSS snippet for the text part (elementor-sticky--effects .menutextcolours) would you be kind enough to see what needs changing? - love to get this working properly
I could but that falls under 1-2-1 Consultation.
Good Video ....i am new WordPress learner I have watched several times this video since last night but am not able to change logo in scroll effect...what should I do?
Did you follow the full instructions with the placement of the items, Class names, and the code in the parent container, and apply the Offset Scrolling Effect?
@@websquadron yes I have applied every thing and rechecked it.
how would you do the social media icons?
Hi, When there are colored borders in sections, columns or another widget, how to change color when scrolling?
That will take some code and needs working out
@@websquadron Help me, please!!!
Is there a way to make the logo transition smoother? Mine is very sharp.
Only with transition duration.
Good evening, I have the canvas menu (elementor free in wordpress) that I would like to change the size of the text fonts (home, contact, etc.) they are very large and I would like to change the font, how do I do it? can you help me?
Can you email me a url?
And have you tried using CSS?
info@websquadron.co.uk
1-2-1 support isn’t free though.
@@websquadron no, I
'm not capable of that..
@@gexcube1981 In that case you may need 1-2-1 support from me or someone else
I used it with the mega menu feature, and still getting some problems with the dropdown indicator color > and CSS for active hover, please help
Difficult to inspect properly without a 1-2-1
@@websquadron I found the bug, it was the inline fonts experiment
Hi Friend, I wanna Change font Nave menu color when content background is black, do you know how to do?
Yup it was in that video. So you would set the colour to be xxx when the background is yyy and then change them based on scroll
@@websquadron which video? could you give me the link, thanks
Does anyone know why my elementor Motion Tab only give me Entrance Animation. Not Sticky, not Scroll or mouse, just Entrance.
Have you got a container inside a container?
Anyone having issues with this recently? I’m just trying to change my icon and hamburger menu colour on scroll with no success. Added the css to the parent section, and the class to the icons with sticky on / offset
Did you add !important and ensure no colours are selected in the EL settings. The standard and scroll colours need to be added to the CSS
Works perfect on "logo" and menu but as the title mention also text and icons that part does not work.
Is that with the right syntax?
@@websquadron got it working with extra css for the text only and own class. Thanks
Please do share the extra code :)@@moime3499
@@moime3499 Hi.. I am also facing the same issue.. menu color doesn't change on scroll. It will be great if you can share the css code for text.. Thanks!
How to change Icons colors after scroll?
See this:
th-cam.com/video/K7G8f_yIFQ8/w-d-xo.html
Step 1. Upload your own custom svg !!!!!(Elementor defaults will not work)!!!!!!
Step 2. Make sure ".menutextcolours" is the calss of the icon
Step 3. Add following CSS to your code
.elementor-sticky--effects .menutextcolours svg {
fill: #ff0050!important;
}
Pretty good but there’s no hover on menu elements after they switched color. How to achieve this?
Do you mean a colour change when you hover, as that will depend on the widget and if you've added Class Name: hover
@@websquadron Yes. After the color change in the menu took place the hover effect on the menu items is gone. I don’t know where to put it in the css to bring it back. I thought I could just copy the lines that made the switch and put a :hover after it but it didn’t work. Would make the tutorial a 100. This way it’s still a bit of a sketchy hack.