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

[@Elementor]

***2023 Update: To add scrolling effects at 02:55, Transparency is now located in Advanced ► Motion Effects ► Scrolling Effects ► Transparency

[@sergio_grez]

But this changes the transparency of the entire header and not only the background. We need a new tutorial with the current settings please.

[@MinisterioÚltimoPacto]

Literally the easiest tutorial on this on KZbin. No code, or plugin. Outstanding!

[@Nadworks-cb]

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

[@huynguyen-fd8pw]

For anyone having issues with transparancy hiding the logo and navigation - make sure to use the motion effects/transparancy in Style NOT Advanced.

[@mmb811]

3:31 Not looking good (Test that page on a web browser and you will see the issue. Works great in the editor, like you showing in the video) On testing this, I discover that there is an issue with this feature. Lets assume that you select green (as background) for the fade in color, then when the page initially loads, it shows the heading background as green, then it quickly fades to transparent. After that initial load it works, but the fact that it shows that initial green, makes this feature unusable on a live production site. Guess it's back to the CSS

[@carlosyarad5165]

Hi, Where you able to solve it? I keep trying without success. The solid color keeps appearing for a second and then it becomes transparent.

[@adrian.fernandes]

Agreed. Same issue when tried. Found a solution?

[@genmcc]

Same-ish. Mine flashes color and then has a white background. No good :(

[@mmb811]

Sadly no, you have to look for a css solution as Elementor has not bothered to fix it!

[@williammatthynssens799]

Just set an entrance animation with a delay of 200ms on that section. You can find it under Advanced > Motion effects > Entrance Animation. That way the section will fade in just after the weird flash so it isn't visible.

[@se1ectmedia]

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.

[@deniseho5831]

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.

[@Grafficted]

i updated elemntor and in the new version it works- in the style tab :)

[@williammendonca7830]

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.

[@itsallaboutnatural]

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.

[@Elementor]

Thank you, we've updated the instructions in the description.

[@JoelMonteManalili-yb3mp]

@@Elementor It should be under the Styles tab ...

[@peterowe3799]

Great vid. How do you alter the amount of scrolling before the header changes colour. I don't want it to change colour until the user scrolls to the next section.

[@iTradeAIMS]

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

[@Elementor]

Love to hear that :) Thanks for sharing, iTradeAIMS.

[@rswebmarketing]

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.

[@ChathumalJayasinghe]

same

[@williammatthynssens799]

Just set an entrance animation with a delay of 200ms on that section. You can find it under Advanced > Motion effects > Entrance Animation. That way the section will fade in just after the weird flash so it isn't visible.

[@daniele7753]

And if i would change also the logo image (using different color logo) when scrolling?

[@brianmok653]

You can use the plus addons plugin

[@mikeys4u]

Add both logos, add CSS to display:none on one when scroll swap logos

[@savtrrsh]

any suggestions to make the height shrink?@@mikeys4u

[@BondJamesBlond]

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!

[@alone_freelancer]

kzbin.info/www/bejne/bnaQnZKVgZl_btE

[@mandalaprayoga]

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

[@debajitchakraborty2711]

Great Video, thanks...

[@GiorgioPagani-yn1ij]

Follow the whole tutorial.. it's works but at the first opening of the page, for a millisecond appear the header with background and then become transparent till i scroll, at should be. Is it normal? there is a way to avoid it?

[@KieranMcCarthy]

Same here

[@williammatthynssens799]

Just set an entrance animation with a delay of 200ms on that section. You can find it under Advanced > Motion effects > Entrance Animation. That way the section will fade in just after the weird flash so it isn't visible.

[@carolandmikeldean9777]

@@williammatthynssens799 thank you so much. This has been driving me crazy.

[@anowerhossen1]

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

[@Digitaldominationbd]

I was looking for such a channel for a long time

[@kwdigitalsolutionswebsited3365]

Wow, so much easier than in the past where I've had to use CSS and offsets etc. thanks for the great video.

[@TechtipsbyNola]

Update. Doesnt work for extra break points you might add to Elementor. They dint show up. Ie 1366 laptops.

[@mohsin0112]

Thank you so much for the tutorial.

[@seppneimusser5723]

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

[@koefdamcityroleplay3964]

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?

[@dicarlostrujillo]

I doubt it is your text becoming transparent, rather than it being the same color as the background, did you manage to fix it?

[@wayariver9721]

@@dicarlostrujillo I found the solution with mine, make sure you're turning the scrolling effects from the STYLE tab not the ADVANCED :--) and dont forget to turn "Effects Relative To" to Entire Page

[@maridsil]

@@wayariver9721 thanks, I was having this problem too

[@TheBosscoe]

@@wayariver9721 Exactly the answer I was looking for, thanks.

[@materializacje]

thank you so much!

[@abdullahafridi8255]

Thanks a lot. It was so helpful and so so simple.

[@alirezasahami1175]

very good, it was practical for me. Thanks!

[@URAajSocialPolitics]

beaufiful lecture

[@darshikatalaviya]

thank you so much it worked for me

[@coxixx]

i wanna change color menu from transparent to white as start scrolling. what should i do?

[@Dylson]

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

[@PierreGobled76]

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

[@Elementor]

Hi Pierre, the Sticky option can still be found under Motion Effects when using containers.

[@PierreGobled76]

@@Elementor Thanks for your answer but unfotunately I can't see this option. It used to be simple to choose to stick an element to the top of the page but not anymore using containers.

[@ismailcakr3923]

tam zamanında gelen bir video harikasınız, eğer birde sticky colora blur eklenirse süper olacak

[@alejandromunoz463]

Just what I was looking for. Thank you so much

[@yassou1202]

Thank you you just save my life !!

[@supercraigjanelli7451]

How do you make the header shrink (including a smaller/different logo) on scroll? Can anyone explain? Thanks so much!

[@robertwattner]

You can use my plugin sticky header effects for elementor

[@vnikyt]

@@robertwattner Thank you for your plugin! I’ve been using it since I started with Elementor and I can confirm that this new feature does not replace it. (Tried it, didn’t do what I needed it to do.) Your plugin gives me more robust header effects, e.g., hiding the header on scroll, shrinking the header and logo (properly!), changing the logo color on scroll. Great work!

[@Golfosophy]

You can also create this effect by changing the padding and width of the logo on scroll with custom css. Easier and less bulky than adding a plugin or custom javascript

[@rameshgraphics8811]

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

[@mychanel3952]

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

[@vibhutiarya2501]

Very helpful........thanks

[@mnburch]

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

[@3ndriago]

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

[@TheCOM]

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

[@baderna2000]

Thank you for all the effort that you're puting into the development of Elementor. I JUST HOPE, ONE DAY, YOU'RE GONNA REALIZE THAT 90+% OF THE WEB VISITORS ARE USING A MOBILE (but you still insist with the desktop tutorials, desktop tweaks etc..) ...

[@Elementor]

Hi Baderna, thanks for your comment. We have many tutorials on responsive editing in Elementor. You can apply the responsive principles learned there to the desktop tutorials.

[@mdfaizanyt]

@@Elementor i want my main home page header and footer to stick on all pages, which i dont know because header and footer cannot be seen in all pages except main home page, so what i did is that i copy header section of main home page and pasted in all pages one by one.

[@Grafficted]

great but- what if i have a box shadow? and i want it to apear after scrolling under the black backround only? now ther eis a shadow on the transperent backround :(

[@bengareth]

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

[@Elementor]

Hey Ben, we'll take a look (or listen 🤭), thanks.

[@mmb811]

I did not know it was built into Elementor, Very nice, thanks (Now I can toss that css I had in there)

[@mmb811]

Sadly it is BROKEN and 100% UNUSABLE!

[@miguelrf7949]

I really love her.

[@appleplusmarketingdigital8611]

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?

[@yuesding7328]

same question. Can elementor told me how to do that?

[@nubenegra809]

color changing or transparency changing?

[@tiagov8316]

hello, howdo i do this sticky header, on just one page??

[@Elementor]

@tiagov8316 Enter the Header template from the Theme Builder, and set the Display conditions to your desired page.

[@raquel_cacaomental]

Please i need help! it changes the transparency of the logo and the burger menu aswell!, how can i avoid that?

[@franktielemans6624]

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.

[@iTradeAIMS]

VIEWPORT in Transparency Option. Bring both to the left.

[@Isa-dq4jw]

Great ! thank you!

[@hamedbouazza8727]

thank you for this good video

[@get8bit]

Feature request: Option to change navigation background color for individual pages.

[@iamkonabe]

You can do this… Create another header and set it NOT to Entire site, but the site you want to show it. Change the background color of this as you wish.

[@mikeys4u]

Just add that individual CSS code into that page. Each page at the top has a page number. Use this and the class of the nav add CSS into the page.

[@get8bit]

​@@iamkonabe I suppose that could work, but you'll constantly have to edit two headers instead of one if changes are needed. ACF works, but it's a pain in the butt.

[@WaltersKochwaesche]

If I switch on the Scrolling Effects then not only the backgroundcolor dissapears until scrolling but the menu-text, too. What am I doing wrong?

[@ShadabDeveloper0]

did you get the solution ?

[@WaltersKochwaesche]

@@ShadabDeveloper0 Yes, if I remember correctly I mixed up the place to toggle the Scrolling Effect: There is a setting for his in the "style" section and another one in the "advanced" section. The one in the "style" section was the right one.

[@gokulmanimaran]

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!

[@Elementor]

Hey Gokul, these kinds of things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions like this, and get solid advice from other web creators. And you can share screenshots and links there as well: facebook.com/groups/Elementors. Alternatively, you can contact support from your Elementor account dashboard.

[@taoli3074]

thanks千

[@michellesilvacuenca1770]

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

[@youssefblt9839]

all i can say is thanks

[@devinova7231]

dont work on gradient background?

[@andrewpower7743]

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

[@crowlsyong]

You’re videos are so helpful.

[@sotostsan]

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

[@blockoreformas9559]

Na minha pagina também ficou tudo transparente

[@wickygallone]

It seems to not work with negative margins though

[@mr_oizofpv4432]

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.

[@OmarWaleed]

Wonderful

[@PlantiDi]

Great!

[@markbratton111]

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

[@Elementor]

Thanks, Mark!

[@LydiaHawkDesigns]

It fades my entire header, not just the background. 😂

[@shonjerdy4652]

we cant make the whole container sticky with flexbox

[@marclegoux4615]

Something about the new calc measurements

[@husker123ify]

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

[@coderplus362]

perfect

[@sundo53]

The critical part is setting to Viewport controls to 0% & 2% relevant to entire page - note to self for later.

[@oksygin]

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

[@yurisamarin8200]

Where did she disappeared? beautiful Shiri

[@BGdev305]

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

[@謝宗佑-u1m]

Semantics.

[@BGdev305]

@@謝宗佑-u1m Not semantics, this is actually 2 different things. It could be transparency using an image also, which isn't "color". So would be best to use "transparency" for the title.

[@bySterling]

Luv 💯🥳

[@himelahmed6589]

its not working

[@Elementor]

Hey Himel, what exactly isn't working?

[@himelahmed6589]

@@Elementor sticky header not working

[@Elementor]

These things can be difficult to troubleshoot without screenshots and more information. Have you joined the Elementor Community? It's a great place to ask questions and get solid advice from other web creators. You can share screenshots and links there as well: facebook.com/groups/Elementors.

[@joe-buchberger]

Great elementor team,now again you just taught how to apply only 50 percent of whats needed.alot of people wanted to know how to change it to white and not transparent when scrolling ,bad job

[@inspector-tech]

Fantastick! Get it? ;-)

[@Elementor]

Of course we do 🤭

[@RyzTrade]

Need discount code voucher pls..!! 😜

[@kevinlefournis6293]

❤️

[@alexedacurro429]

Why is mine in reverse? LOL

[@yurisamarin8200]

Like to beautiful Shiry!!!!

[@findtech-llc]

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

[@Elementor]

Hi E.T., please contact customer support directly from your Elementor account my.elementor.com

[@connectadnan4669]

Second

[@Elementor]

🥈

[@kwixkedem4398]

First!

[@Elementor]

🥇