Create a Color Changing Sticky Header Without Code in Elementor [PRO]

How do I make the transparency effect only on the background colour? The logo, menu, and other elements in the header become transparent along with the background and only appear after scroll.

we cant make the whole container sticky with flexbox

Just an update to this very helpful video. In the latest version of Elementor PRO 3.16.xx, use the transparency effect in the style tab, not in the advanced tab.

Very helpful........thanks

it doesn't work as the Trasparancy affects all the elements in the container, i.e. logo and menu... at least after the new broken updates by Elementors devs... i'm starting to get really bored of Elementor, it's Bugementor now.

2023 Sept: Great tutorial video! Still works like a charm even with the new elementor layout! Thank you!

Thanks Thanks, I applied this to my current website and instantly saw great improvement.

Where did she disappeared? beautiful Shiri

There is a problem in your tuto. When we first arrive on the website, the black color on the background appears, then transparency arrive after 1 sec. The black background must arrive only if the visitor scroll, not when he first arrive on the website.

Thank you you just save my life !!

you set the color of the header to transparent , and then set a semi transparent color, not sure why , or what is the effect there, it has to be transparent, and then change to a color when scroll, not what is shown on this video

its not working

Love it! Very helpful. BTW, I just pushed you up to 1K likes, lol. It's not bragging if it's true😉

hi.. trying to do apply sticky header but no luck..though its very simple thing but not working with me ... by the way i am using container rather than section, hope its ok ? Appreciate your help...

I was lost before I saw your tutorial^^ Thank you so much!

Thanks for this video! Would you be able to also please cover how to change the text color on scroll - as an extension of this header behavior? Thanks!

Something about the new calc measurements

I don't know why when I change to view from mobile or tablet, the background disappear!!! just in desktop it is okay everything, so help!!!

not working the same, background colour header, goes transparent when scrolling

I bought Elementor Pro, I had problems with the installation, and I couldn't get a refund! they take the money and disappear!

Awesome tutorial. It worked for me perfectly. Thanks so much!

How did they fit a Header element in an Elementor Canvas page layout?

all i can say is thanks

This is great but what if I want to change the text on scroll is that possible from say white (when its transparent) to black (when the background changes color?) that is where this really makes it.

thank you for this good video

What am I looking at? I really don't see what its doing

i have error from elementor library ...can i try to insert theme like header and footer to my website show error notification like (An error occurred -internal server error) how to fix this problem!

Just what I was looking for. Thank you so much

Thanks for the video, I would love to have some information on how to have a sticky header with Flexbox because I can see that the option is no longer available. Thanks again

Please could you check the volumes on this video - otherwise brilliant content thanks!

I was looking for such a channel for a long time

Great!

dont work on gradient background?

perfect

Unfortunately on the newest Version it does not work anymore... The choosen color should appear only on the sticky mode... but it shows up the whole time.

need more tutorial for sticky header, shrink header, change color header and font header... need more !!!

What if I want to do the opposite? The transparent menu and when scrolling the page the menu will show the background color of the menu? It's possible?

Is it only for me that transparency makes the whole section transparent instead of the background color?

My text also becomes transparent like the background. I followed all the steps exactly as in the video, does anyone know where it went wrong?

How would we now change the logo (i.e. if we want to switch the header colour to white and swap the logo with its inverted version)?

Is there a way to make custom callout icons? similar to what blue prints have or microsoft word does with callouts?

please also let me know as i could not see the effect in mobile view

It would be amazing to see this Tips & Tricks videos subtitled in other languages, the reach for the plugin to reach more people would be very expressive.

Need discount code voucher pls..!! 😜

Except this isn't a "color" changing header.. it's a "transparency" changing header

Thanks, I applied this to my current website and instantly saw great improvement.

thanks千

ok, it's without code, but this also means that the transition is dependent of the length of the page.
On a short page the transition will happen very quiclky, while on a long page it will be much slower.