Hm. Doesn't work :( Everythings pretty well but the blur.
@gautamneeraj
Жыл бұрын
You'll need to change the CSS code for the new Elementor. selector.elementor-sticky--effects{ background-color: rgba(0,0,0,0.4)!important; backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } selector{ transition: background-color 1s ease !important; } selector.elementor-sticky--effects { min-height: 65px; } selector{ transition: min-height 1s ease !important; }
@crystalfunky
11 сағат бұрын
unfortunately doesn't change
@Leziq
3 жыл бұрын
Hey Rino, thanks for the next great tutorial. Unfortunately this blur effect does not work on Firefox for some reason but on the rest it's pretty cool and smooth.
@litdav
2 жыл бұрын
wondered too, but you're right, it works with any other browser
@TheSilverGate
7 ай бұрын
Hey Rino, any idea why the header won't shrink to 70px? I have an ASTRA theme and Elementor Pro
@crystalfunky
11 сағат бұрын
same here
@jrothra
2 жыл бұрын
I love your tutorials! Clear, simple directions. I'm curious, can you make a tutorial on how to create a two-level header (main nav with a top bar) wherein the main navigation is sticky, but the top bar slides away when scrolling?
@phillsand_co
2 жыл бұрын
For this you just need to set the menu header to sticky and the top bar section not. keep an eye on the layers/z-index. should work fine 👍🙂.
@Untitled2580
3 жыл бұрын
Bro make more videos on custom site crocoblock and listing website, I'm also workings on listing website,
@amandasjas
7 ай бұрын
I’ve followed all the instructions perfectly and yet the size of the header doesn’t change on scroll. The other effects work just fine, so I have no idea what’s standing in the way. Ideas, anyone?
@crystalfunky
11 сағат бұрын
same here
@alanjones9926
Жыл бұрын
No longer works with Containers unfortunately 😞
@SaveTheHuman5
3 жыл бұрын
sad firefox wont come with backdrop-filter effect enabled by default.....................firefox is a shame and a sh** There is some workaround?
@momomedia2682
3 жыл бұрын
Somehow this works in chrome but not in firefox. Also my cartdrop down displays inside the header with the blur (chrome) and is okay in firefox.
@WPSolver
3 жыл бұрын
An idea for a new tutorial: what is the best way (I mean not slowing down the website too much) to use background video?
@rahulsharma5799
3 жыл бұрын
jet woobuilder elementor please
@10Web
3 жыл бұрын
This really cool. Everyone needs this kind of tutorials right now to play with design and creativity more.
@AbdelhadiBenlaredj
3 жыл бұрын
Great tutorial! I'm wondering if you could apply that blur effect on dropdown menus ?
@Kipcab
3 жыл бұрын
This works perfectly in Chrome but Firefox doesn’t support it. Do you have a workaround so it works in all browsers?
@מיכל-מיסדיגיטל
2 жыл бұрын
Hi Rino, thanks for the great video! :) My question is how to apply additional code when there is a drop down menu with categories below?
@maxxxiking96
3 жыл бұрын
Not working on Firefox. Besides that, good video.
@JustAn0therSoul
3 жыл бұрын
Im using this since a while and im loving it, sadly firefox by default has disabled rendering that css command.
@d33d19
Жыл бұрын
Love your tutorials. Knowing that Elementor has had a few updates and Croco has JetSticky - you might want to have a quick update to this process. :)
@slxmmz
6 ай бұрын
Hi Rino, what an awesome tutorial! But Im having an issue here, I'm using newer version of elementor and the max height effect is not working :( Is there any workaround with that? I would really appreciate that
@gugafumero
5 ай бұрын
Try to replace this to selectors: selector.elementor-sticky--effects { min-height: 70px !important; } selector { transition: min-height 0.5s ease !important; }
@ahmadnahedh1849
3 ай бұрын
@@gugafumero thanks worked for me
@ptsful
3 жыл бұрын
How did you make that banner video effect where only shows the video on one part of the banner?
@adityasharma9983
3 жыл бұрын
............Please make a video on adding a TOOLTIP (like wikipedia ) without crocoblock .using some extension may be.............
@sankalpbalani
3 жыл бұрын
Hey Rino Really loved the design of this page If you have not already planned plz create some design tutorials too.
@cristopherrivas8404
20 күн бұрын
Hey Rino, I’ve followed all the instructions perfectly and yet the size of the header doesn’t change on scroll. The other effects work just fine, so I have no idea what’s standing in the way. Ideas, anyone?, and also when y preview it works, but when i try to see it working not logged at wordpress it wont work, can you please head me up!
@Pankaj3359
3 жыл бұрын
It would be great if you make a video tutorial of this entire page. That rotation effect in the image below the hero section looks amazing. 🔥
@BloomingDesigns_byMel
2 жыл бұрын
I loved this tutorial! But for some reason, it keeps adding 2 headers to my website instead of just one, like it duplicates and shows the 2 headers, one above the other, and looks terrible. I tried many things already to disable it but idk what I'm missing, hoping you can give me a tip on that! 😢!!!
@LunariaStellar
7 ай бұрын
Hej, thanks for the tutorial! It looks so good, but on mobile it is stuttering/clipping when you scroll down from top & the header is shrinking. Is there any solution for this? :) Thanks!
@yelowme.design
8 ай бұрын
Hi Rino, thanks for sharing this great tutorial. I did everything as you instructed but I can`t get the header to shrink on scroll, everything else works fine. My guess is that it's because of an Elementor update. I would really appreciate it if you could help me!
@petrhervy
Жыл бұрын
Important! This is not available in new version of elementor.. Suddenly themenu is not blurred. I am trying to figure it out..
@lanieticman1807
3 жыл бұрын
Hi Rino, I've email you regarding ADOBE XD course. Thanks.
@arezkhidr
3 жыл бұрын
This is great! I am having an issue however where in the code the "elementor container" text is not highlighted blue and is instead just a grey color. Which is preventing the header from shrinking when I scroll, any idea how to fix this and why it is happening?
@mattiapapa8248
2 жыл бұрын
Hey man, I've got no ideas but it doesn't work with flexbox... Could you please help?
@mohamadhashemganjei9694
Жыл бұрын
hey rino, huge thanks for the video, i'm having problem accessing the resource link!! any suggestion?
@kamrul5286
Жыл бұрын
Really awesome video! Could you please tell me what Theme are you using? Thanks in advance. Love from Bangladesh 💚
@larsvantuijl1917
Жыл бұрын
Hi Rino, Can you put me in the right direction? While creating a new header using elementor, it looks as expected on desktop, but my Astra theme overrides my created header on mobile devices. At the bottom of my site I can choose between "mobile version or desktop version". When I click desktop version, I see the header I created for mobile, but when I click mobile version, the old Astra theme header pops up again. Also, the site looks way less nice with the "mobile" version than with the desktop version shown on mobile. Is there a way to delete or override the Astra "mobile" theme completely?
@8GuiLLeM8
2 жыл бұрын
Hi! thar was really cool! But, it's possible to make the blurry header in white?
@mertgundogdu211
Жыл бұрын
Thanks for tutorial. I have a question rino When I am openin my toggle menu in mobile version, toggle menu is streching my header 's height. How I can fix it?
@skillfiggo367
Жыл бұрын
Thanks alot, I just subscribed.. can you make the header more mobile friendly ?
@content4free99
Жыл бұрын
It looks really cool! But it must work under Elementor Pro. Do you think Elementor Pro is worth purchasing?
@ricr8987
3 жыл бұрын
Hey, nice tutorials, but this css it's not working anymore? In the code inside elementor I get a ! errors in the -color 1s ease and unknown property in backdrop filter....
@uff3511
10 ай бұрын
What is about dropdown menu? (For now it is a fantastic tutorial for very simple headers without dropdown or for mobile)
@DonkeyKing
2 жыл бұрын
What if the Nav Menu Items text color has to be different before scrolling? Does anybody have a fix?
@gut3k814
Жыл бұрын
What to change in the code if it works on containers and not sections? Shrinking the header to 70 pixels doesn't work for me. Please help :/
@2takt387
10 ай бұрын
Hey Rino, i dont know why but my Header is not getting smaller when i start scrolling. Why is that?
@jessesmith8990
2 жыл бұрын
I see now that many others had the same problem: the blur part of css doesn't work....I am also using firefox as was another commentor on this topic.
@HOLBAG
3 жыл бұрын
hello do you have video about building complete website with wordpress, i searched your channel i can't find it
@bosscreative2225
2 жыл бұрын
How come firefox doesn't display this effect properly? Every other browser does.
@FunixInfoUYM
Жыл бұрын
Hi Rino, there is a konfilkt with the shopping cart. the shopping cart also becomes small when scrolling. is there a solution for this?
@noorularfeen743
Жыл бұрын
Hey, Rino! I want to know how much you have learned the coding about web development.
@Error40499s
Жыл бұрын
I'm facing an issue with crocoblock menu on mobile device using this code, do you have any idea how can I fix it?
@MarcosKeaney
3 жыл бұрын
Hi there - great video. I've go this effect working on all internal pages however it simply won't work on my homepage. Is there anyone that has the same issues? Thanks
@perrinecroutelle2125
3 жыл бұрын
I've got the same issue as well unfortunately :(
@MarcosKeaney
3 жыл бұрын
@@perrinecroutelle2125 I've found the solution actually myself. With Z-index of '10' on the header, save this and switch to edit the page. The on the section immediately after the header, add a Z-index of 1. This worked for me :)
@d33d19
Жыл бұрын
Any one else having issues with JetThemeCore and Elementor Menues?
@frankhaagmans2187
3 жыл бұрын
Hi Rino, great tutorial! Question: for some reason the header on a mobile device gets an instant blurry background. I would also like it to only have blurry background when scrolling on Mobile. Do you have any idea how to fix this? Keep up the good work!
@mathieucharret4775
2 жыл бұрын
I have the same problem, have you found a solution ?
@frankhaagmans2187
2 жыл бұрын
@@mathieucharret4775 no unfortunately not. I'm using another header now.
@ItzFactzilla
Жыл бұрын
Hi rino pls guide me how to add dark colour top bar in it. Thanks
@srishtivashishtha1979
2 жыл бұрын
I made a header and whle updating I made the display settings to be "entire site" now whatever I am putting on homage is being applied to all other pages instead of just header. Please help- I want only header to be displayed on entire site and not all the sections on home page
@usmansiddique67
2 жыл бұрын
I have tried it step by step but I don't know why it's not working properly.
@percephanyn2463
Жыл бұрын
I followed this tutorial but the header won't appear on my page. Please help me
@aidarousjibril6323
2 жыл бұрын
Where can I get that kind of background video pls ?
@jasmeetsingh6980
2 жыл бұрын
for some reason blur effect is not working ... help!!
@Kaizokn
2 жыл бұрын
Tysm !
@AIAutomation007
2 ай бұрын
code does not works now any update on this ? tried repeated this video 5 times to see if i made any mistakes
@onoa_
2 жыл бұрын
is it possible to have the same effect only on button like the "click here" button 🧐
@ampersandstudios4458
3 жыл бұрын
a video about dealing with elementor and wcag 2.1
@bektinurwanto
3 жыл бұрын
is enough sir?? how to setting mobile phone view from this tutorial content
@מרדכישלמהארז-ז3נ
Жыл бұрын
Hi. if i want that the blur will be white color. whats should i do ? Thanks
@isha4046
3 жыл бұрын
Hi please make more vedios on designing website in XD please
@moradkarimpour4081
3 жыл бұрын
Hey Rino, Thank you for your amazing tutorial. I followed your instructions to the letter, and got everything working except for the blur effect which is really NICE and I was hoping to get it to work with my page The thing is that my header works fine when I'm in the edit section of wordpress. But when I go back to the webpage to see the effect it's not blurred and is only transparent. I'm using chrome on windows 10. But it is the same on my mobile as well which runs android
@oaksurfracks6895
2 жыл бұрын
I have the same problem. Did you get a solution?
@bharatkumar1041
2 жыл бұрын
Pls A small help anyone. How to change the logo or the image on scroll.
@lexdesigns
Жыл бұрын
For some reason mine doesn't shrink when scrolling down
@michaelfrymus
3 жыл бұрын
Random Unrelated to video Question: - Why does my website look different in incognito mode? Example: My menu font is white, but in incognito mode, the fonts are black. Buttons are reversed colours, and a few other random things look different. Why? Is this normal, is this bad?
@KohlHosein
3 жыл бұрын
Good to see you Rino! Question: why not use inline positioning when placing your elements in the header instead of columns?
@shesapiens
3 жыл бұрын
he wants the logo to be centered
@KohlHosein
3 жыл бұрын
@@shesapiens you can use space between with in line elements
@sergio_grez
Жыл бұрын
@@KohlHosein that wouldn't work if one of the elements is larger (wider) than the rest. Space between doesn't mean the item that's in the middle will stay at the exact center of the page (nav)
@koshinryudojo-iaidojodosab875
Жыл бұрын
Amazing. Thanks for
@DanZL1
2 жыл бұрын
What if we also want to change the menu item color to white when it scroll?
@intidigitalconsultingco.6273
Жыл бұрын
Hello Rino, great tutorial but the code for sticky and bllur doesn't work anymore. I checked if some of the plugins could be the reason but the same problem persist. Could you check it out. Cheers!
@rinodeboer
Жыл бұрын
Try it again and make sure to update Google Chrome and Elementor. Elementor just fixed it. The code still works 👌🏼
@cryptochrome_original
3 жыл бұрын
This looks beautiful! I wonder if that CSS could be used for other themes that don't use Elementor?
@MJScottPhoto
3 жыл бұрын
It will, CSS is not unique to themes or page builders
@LeopoldoMoiane
5 ай бұрын
verry nice, Thank you Rino!!!
@MohdYazzidHashim
Жыл бұрын
Hi Rino, great video, awesome tutorials. Tried and its work great. However the blur effect didn't load on Firefox. Would appreciate if you can check and update. Thank you.
@ZirkusElune
2 жыл бұрын
Hey there, I really enjoy your Videos, just did the Blur Header with a page and recognised, it will not get blurry in Firefox.... please check out! maybe you have an additional CSS for shrinking the logo too... thank you!
@dinobae2741
2 жыл бұрын
please, what do you do in minutes 2:27
@alexandermalmstrom8226
2 жыл бұрын
For some reason I have to scroll up to make it transperant. Its blurry and then when I force scroll up about 2px it becomes transparent. Why could this be?
@alexandermalmstrom8226
2 жыл бұрын
Found it! I hade a -margin lager than the header.
@ColoredStripes
11 ай бұрын
Rino, can you please update this video for the new Elementor Pro functionalities. Because this code does not work anymore with the older version of Elementor
@rinodeboer
11 ай бұрын
Absolutely. I will update this video soon 👌🏼
@monsieurc-p9564
7 ай бұрын
killer content ! thanks and congrats
@Eichman86
11 ай бұрын
doesn't work and i did try many many times :(
@emanuelbagirathi4750
3 жыл бұрын
There is one thing that seems simple but I find really confusing...I want a submenu option called "Latest Post" that when clicked, will open my most recent blog post. Any idea how to do that????
@vaazerty
Жыл бұрын
Great header ! Is there a way to make it work with Elementor flexbox ? Everything works except for the shrinking.
@karlal9609
Жыл бұрын
Hi! Did you ever figure out how to make it work for the container? I applied the tutorial when I still had the previous version and now the shrinking doesn’t work.
@katerynalearbuch24
3 жыл бұрын
you are golden! thanks for this tutorial. I was actually looking for a sticky bottom button with a popup messenger, but always love to watch your new videos :)
@ucle4134
3 жыл бұрын
Hello ! how do i get the css code according to this video?
@gautamneeraj
Жыл бұрын
This was very helpful. Thank you! Especially little tricks like making the "vertical padding" zero. My NavMenu was not aligned perfectly and just couldn't figure out why...
@ZaahirJappie
3 жыл бұрын
Nice offset tip ...thanks!
@ferrosdistro6105
3 жыл бұрын
it doesn't work all time on web browser.
@jonathanpratama611
Жыл бұрын
Nice video. Thanks!
@woodea
2 жыл бұрын
i dont have pro so what have do
@harbourdogNL
2 жыл бұрын
Apparently it's not possible to have two sticky sections, one above the other, and for both of them to remain in place and visible as the user scrolls down the page (i.e., the content moves up). I've tried, I've posted to reddit and the Elementor help forum, and even the tech support at Elementor Pro aren't yet quite sure if it's doable or not. I'm surprised this isn't possible.
@malejol.official
Жыл бұрын
Thank you for this awesome tutorial, but I stuck on there because I have 3 sections in a header one with a topbar section second one with a logo, and some other stuff, and the bottom section with the menu. Now how can I put a sticky header which is different from the rest of the sections? Hope you got my question and make a video on it ASAP.
@김민찬-d7b
2 жыл бұрын
Thank you for your good guide. I solve the Header Sticky Issue~!! I Wish your Good lock to you!!
@GARdotETH
2 жыл бұрын
Hi, works great on the bog standard menu, but if you choose a 'Flyout Menu' the CSS seems to break the flyout menu and you can't see the content in the flyout menu. Does anyone know of a fix?
@oaksurfracks6895
2 жыл бұрын
Hi, thanks for the video! When I scroll down it is not showing the blur. It works in the elementor editor but when I save and look in any browser it's not working. Any ideas?
@sucd218
11 ай бұрын
so cool, and thks
@sanijaperera6218
2 жыл бұрын
love you bro . it worked tnx.
@Miczkunio
Жыл бұрын
Heyy, very helpful turtorial. I have a question tho, what code do i have to add to make image I put in the header menu smaller afer scrolling? To reiterate, I want my logo to be bigger when user is on the top of the page and make it smaller together with this effect that makes header blurry.
Пікірлер: 261