Change the Sticky Header Background Colour with No Code - Elementor Wordpress Tutorial
HTML-код
- Опубликовано: 11 окт 2024
- What if you have a Transparent Background Sticky Header - and you want to change colour with no extra Plugin and no extra code?
Easy!
Change the Sticky Header Background Colour with No Code - Elementor Wordpress Tutorial
Hire us to work on your Website! info@websquadron.co.uk or visit websquadron.co.uk
Get Elementor Pro: trk.elementor....
Get Elementor Cloud Hosting: trk.elementor....
Support us: paypal.me/Webs...
Mastery Membership: websquadron.co...
Indeed we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
Equipment Used:
Softbox Lighting Kit (to focus main light onto me in a dark room): amzn.to/3feqH18
Soundproof Panels (to provide a dark setting, and prevent sound bounce): amzn.to/3HVfwqa
3m Ethernet Cat 7 Cable (to maximise the Internet Connection as the room is upstairs): amzn.to/3GlBvGw
Anker 6 in 1 Adaptor (for the Macbook Air to increase USB-C, USB-A, HDMI, Ethernet Ports): amzn.to/3tiukLA
USB-C to Lightning Port Cable (from my iPhone to my Macbook Air): amzn.to/3K2tGaU
Powerline Adaptor (boosts internet connection from downstairs 380mbs to the upstairs room 120mbs): amzn.to/3r8YcYc
Floodlights (positioned to glow onto the walls): amzn.to/33mRqWD
LED Light stands (either side of me): amzn.to/3Iaerez
Fifine Dynamic Microphone: amzn.to/3osbxu2
Floating Shelves: amzn.to/3Fhxyl1
Hanging Pendant Light Holders: amzn.to/3qgwnhg
Vintage Light Bulbs: amzn.to/3K0bQ8B
Music used:
Track: Will You Be Mine (Remix)
Free download: brokeinsummer....
Artists: brokeinsummer.com
Contact: brokeinsummer....
Music provided by Audio Library Plus
- Get Elementor Pro here --- trk.elementor....
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/i...
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at info@websquadron.co.uk
PPPS: We only build with Elementor Pro
![Create a Color Changing Sticky Header Without Code in Elementor [PRO]](/img/1.gif)
i love when youtubers get straight to the point. this was great, thanks!
you constantly save my life
thank you for this valuable lessons
Oh wow, I was looking into it and found lots of different codes, but they didn't do what I wanted to achieve: a sticky menu with different backgrounds and logo colors. And now, boom! Got it. Done it! Works! Thank you soooo much, Imran I am subscribing to your channel now :)
Glad I could help!
You are the best man from Pakistan....❤❤
Thank you very much!
So helpful Imran, exactly what I had planned to work on tomorrow!
That solves it all... Thanks a bunch
Thank you, Boss
Hey, I'm noticing that you keep dropping more videos, keep doing your thing, am gonna watch every single one of them, and support how I can.
On a roll at the moment. Wait till you see what I drop tomorrow. I think it's a game changer for interaction :)
Very good work!
wow, that's great Imran. Thank you !!!!! How do I combine this with also changing the text & logo color on scroll down?
Here you go :)
Extra bit of code :)
ruclips.net/video/8E-l__L4L8o/видео.html
@@websquadron hey, thanks for the quick response. Will check it out now
Works great! However I am having an issue. Upon loading my home page, the header will be black for a split second and then immediately becomes transparent after the page has loaded. How do I fix this?
I am having the same problem. We need help please Imran 🙂
Love sir ❤❤❤
This is helpful👏👏. But i have one doubt. How to inter change the light logo to dark or in reverse like this. Is that possible without any code ?
You'll still need code and that video comes out on Monday with changing images, text colour of menus, icon colours, etc when you scroll.
@@websquadron Cool. I appreciate it bro. Waiting For the tutorial👍😊
Very helpful thank you!
Thank You So Mucha
Really clear. Thanks!
Great stuff as usual.
Another good one 💪
Have you seen the latest one with the Human interaction. You could now do one with your dog appearing in a a video on your site!
@@websquadron dude! I always thought to have Yoda(my dog) as the face of the Lytbox brand! Imma check this out. Cheers!
Many thanks dear for your great videos ;-)
you just king
Nice Man
thanks
I create header in header template in theme builder and give display condition to whole website but the transparency is not applying. It stays white all the time
How can I solve this ??
Awesome.
Wait till you see tomorrow's video!!!!
@@websquadron can’t wait 🙌
I tried this but and set it correctly but when I test it on my test site I get a flash of the changing color before it goes clear.
Oh no.
Have you got a url to share?
Thanks for looking.
Were you able to fix this?@@mrs.pracna5557
same issue
I still don't understand that viewport slider. Perhaps you could do an explainer video on it
It is a peculiar one so I’ll work on a video for that.
What if I want to apply it on the border color too?
Add border-Color
Crazy !!!🙌💪
Right! Please do share!
this is easy but can you say how to give background color to the top navbar and main menu ?????
Sorry what do you mean?
Background colour as in the Style of the Navbar? Or something else?
Hey, i've followed the tutorial to change the header background on scroll but mine isn't working. The transparency effect on the header section isn't taking effect when I switch on 'Scrolling effects'. I'm using Astra theme but no other plugins at the moment as just started building the website so only working on Header and footer currently.
I've regenerated the CSS in Elementor too. Any ideas why it's not taking effect?
Have you got any other content on the page so that you can see if the scroll works?
I make templates in the theme builder and in my header template I only have the nav bar so the scrolling effect doesn't take effect. But, I have so many complicated navs that I want to edit separately from page.
actually i do all you do but the effect dont work at all
Have you got any other colours applied or CSS to the Headers?
@@websquadron no but my header is gradient
when im previewing the effect on the theme builder seems to work just fine but on the real webpage it dont work
not cache also
crack!!
If it's not working then this will work from the Elementor's official website: ruclips.net/video/PJp87rmeLcI/видео.html
Why is this not working with containers? I set the header container background color white and then go to scrolling effects / transparency / fade in but the background color is always white no matter how i move the slider.
Ah nevermind, I went automatically to advanced tab scrolling effects. Never noticed there were two, one in style and another in advanced.