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

No video

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

Рет қаралды 73,135

Elementor

Күн бұрын

Пікірлер: 137

@Elementor 10 ай бұрын

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

@MinisterioÚltimoPacto 4 ай бұрын

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

@kwdigitalsolutionswebsited3365 6 ай бұрын

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

@TechtipsbyNola 6 ай бұрын

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

@Nadworks-cb 2 жыл бұрын

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

@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 9 күн бұрын

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.

@huynguyen-fd8pw 3 ай бұрын

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

@williammendonca7830 2 жыл бұрын

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.

@baderna2000 2 жыл бұрын

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 2 жыл бұрын

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.

@itsallaboutnatural 10 ай бұрын

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 10 ай бұрын

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

@JoelMonteManalili-yb3mp 10 ай бұрын

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

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

@mmb811 2 жыл бұрын

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 2 жыл бұрын

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 10 ай бұрын

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

@mmb811 10 ай бұрын

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

@williammatthynssens799 9 күн бұрын

@iTradeAIMS 2 жыл бұрын

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

@Elementor 2 жыл бұрын

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

@mandalaprayoga 2 жыл бұрын

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

@anowerhossen1 Жыл бұрын

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

@Dylson 11 ай бұрын

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

@coderswithtaif Жыл бұрын

I was looking for such a channel for a long time

@peterowe3799 4 ай бұрын

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.

@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 Жыл бұрын

kzfaq.info/get/bejne/bqtdn8KQsZqwaKM.html

@URAajSocialPolitics 3 ай бұрын

beaufiful lecture

@alirezasahami1175 5 ай бұрын

very good, it was practical for me. Thanks!

@deniseho5831 9 ай бұрын

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 6 ай бұрын

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

@seppneimusser5723 Жыл бұрын

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

@abdullahafridi8255 2 ай бұрын

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

@koefdamcityroleplay3964 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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

@GiorgioPagani-yn1ij 5 ай бұрын

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 2 ай бұрын

Same here

@williammatthynssens799 9 күн бұрын

@ismailcakr3923 2 жыл бұрын

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

@mnburch Жыл бұрын

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

@coxixx 3 ай бұрын

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

@alejandromunoz463 Жыл бұрын

Just what I was looking for. Thank you so much

@mr_oizofpv4432 10 ай бұрын

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.

@yassou1202 Жыл бұрын

Thank you you just save my life !!

@miguelrf7949 6 ай бұрын

I really love her.

@mmb811 2 жыл бұрын

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

@mmb811 10 ай бұрын

Sadly it is BROKEN and 100% UNUSABLE!

@user-ip4op2lj5h 7 ай бұрын

thank you so much it worked for me

@daniele7753 2 жыл бұрын

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

@brianmok653 2 жыл бұрын

You can use the plus addons plugin

@mikeys4u 2 жыл бұрын

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

@savtrrsh 6 ай бұрын

any suggestions to make the height shrink?@@mikeys4u

@rameshgraphics8811 2 жыл бұрын

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

@Grafficted 6 ай бұрын

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

@raquel_cacaomental 5 ай бұрын

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

@vibhutiarya2501 10 ай бұрын

Very helpful........thanks

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

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

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

@TheCOM 2 жыл бұрын

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

@supercraigjanelli7451 2 жыл бұрын

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

@robertwattner 2 жыл бұрын

You can use my plugin sticky header effects for elementor

@vnikyt 2 жыл бұрын

@@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 7 ай бұрын

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

@3ndriago Жыл бұрын

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

@get8bit 2 жыл бұрын

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

@knbenji 2 жыл бұрын

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 2 жыл бұрын

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 2 жыл бұрын

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

@Isa-dq4jw 2 жыл бұрын

Great ! thank you!

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

@wickygallone Күн бұрын

It seems to not work with negative margins though

@hamedbouazza8727 Жыл бұрын

thank you for this good video

@taohi01 2 жыл бұрын

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.

@josephvillenabuchberger4257 Ай бұрын

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

@crowlsyong 2 жыл бұрын

You’re videos are so helpful.

@ThisIsOmar143 4 ай бұрын

I am having problems when I set the header motion effect on transparency I can't be able to see the entire header util I scrol, Instead of the header background only. Anyone with Solutions?

@ShadabDeveloper0 4 ай бұрын

facing same issue

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

@WaltersKochwaesche 4 ай бұрын

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 4 ай бұрын

did you get the solution ?

@WaltersKochwaesche 4 ай бұрын

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

@PlantiDi Жыл бұрын

Great!

@OmarWaleed 2 жыл бұрын

Wonderful

@tiagov8316 2 ай бұрын

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

@Elementor 2 ай бұрын

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

@appleplusmarketingdigital8611 2 жыл бұрын

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?

@taoli3074 2 жыл бұрын

thanks千

@andrewpower7743 Жыл бұрын

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

@nubenegra809 2 жыл бұрын

color changing or transparency changing?

@youssefblt9839 Жыл бұрын

all i can say is thanks

@franktielemans6624 2 жыл бұрын

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 2 жыл бұрын

VIEWPORT in Transparency Option. Bring both to the left.

@coderplus362 Жыл бұрын

perfect

@devinova7231 Жыл бұрын

dont work on gradient background?

@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

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

@sotostsan 2 жыл бұрын

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

@blockoreformas9559 2 жыл бұрын

Na minha pagina também ficou tudo transparente

@shonjerdy4652 10 ай бұрын

we cant make the whole container sticky with flexbox

@marclegoux4615 Жыл бұрын

Something about the new calc measurements

@bySterling 2 жыл бұрын

Luv 💯🥳

@yurisamarin8200 Жыл бұрын

Where did she disappeared? beautiful Shiri

@BGdev305 2 жыл бұрын

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

@user-xv2dl5pi5y 2 жыл бұрын

Semantics.

@BGdev305 2 жыл бұрын

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

@oksygin Жыл бұрын

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

@inspector-tech 2 жыл бұрын

Fantastick! Get it? ;-)

@Elementor 2 жыл бұрын

Of course we do 🤭

@kevinlefournis6293 2 жыл бұрын

❤️

@yurisamarin8200 2 жыл бұрын

Like to beautiful Shiry!!!!

@RyzTrade 2 жыл бұрын

Need discount code voucher pls..!! 😜

@alexedacurro429 5 ай бұрын

Why is mine in reverse? LOL

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