FROSTED GLASS EFFECT NAVBAR - Elementor container edition
Vložit
- čas přidán 30. 07. 2024
- I love the frosted effect on anything and that might have something to do with Apple. I've been influenced! 😂 Frosted glass effect navbars are on another level, elegant and modern!
CODE: www.notion.so/CODE-Frosted-Gl...
Timestamps:
00:00 Intro
00:21 Breakdown of the look of the Navbar
02:13 Building the Navbar (Desktop)
06:31 Building the Navbar (Mobile)
10:46 Outro
Thank you for watching!
🟠 SUBSCRIBE TO THE NEWSLETTER:
newsletter.studioegli.com/
🟠 TRY ELEMENTOR
be.elementor.com/visit/?bta=2...
🟠 TRY HOSTINGER
hostinger.com?REFERRALCODE=1ANDREEA61
🟠 WORK WITH ME
www.studioegli.com/
🟠 YOU CAN FIND ME HERE TOO
TWITTER - @AndreeaEgli
LINKEDIN - / egliandrea
INSTAGRAM - / egliandrea.studios
🟠 FOR BUSINESS ENQUIRIES
contact@studioegli.com
Disclaimer - Some links in my videos' description box may be affiliate links, meaning I will make a commission on purchases you make through my link. This is at no extra cost to you to use my links/codes, it's just one more way to support me and my channel! :)
#elementortutorial #elementorpagebuilder #elementortipsandtricks
Not your average Navbar let me know if this was helpful!
That was so good
Thank you, it's very cool!
Happy to hear that you found this useful 😉
WaOw !!! Awesome 😍🥰💯💫💥
looks nice
thank you!
Hi Andrea, great video! I have tried to implement this effect and it's working great - however whenever I have a menu with a submenu/dropdown on desktop, it has been impossible for me to also implement the effect in the dropdown! Do you have any idea how that could be done?
I even tried to find the submenus selector using Googles inspect tool, but for some reason the backdrop filter just doesn't seem to work there.
If you have any ideas I would really appreciate it - and again thanks for a great video!
Hey Oscar! Here's the code for the dropdown, I just tested it and it works on my end
selector .elementor-nav-menu--dropdown {
background: rgba( 255, 255, 255, 0.05 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 25px );
-webkit-backdrop-filter: blur( 25px );
}
of course, decrease/increase the blur filter as you need. Let me know if it worked ;)
THANNNNKSSSS!
You're welcome!!!!!!
Thanks a lot!!!. Looks nice and cool. The only problem is that the line "backdrop-filter: blur( 25px );" is making all my OffCanvas Menus to show incorrectly :(, the blur effect show correctly on the section where my hamburger is but when I press menu button the menu canvas doesnt shows correctly. I will try to make it work, but thanks a lot.
Thank you so much! Hmm, that's very strange, check this video out where I'm implementing the blur filter on an off-canvas menu czcams.com/video/2BbgbHEVfA0/video.html . Let me know if it worked!
that was cool but i have a little problem after i made the header sticky to the top when i scroll down i lose the 10 px padding that i set on the top between the header in the top margin, how can i fix it ?
give it some offset instead of padding
i was able to create it for desktop but for tablet and mobile it was not looking good and i was unable to sort it out
Sorry to hear that but I guarantee you that this works. What exactly isn't working on mobile? I've used it in many projects, so try debugging your issue, the answer is in there somewhere.
Hi Andrea could you send me an export of this navbar please
Nice one! for the mobile you could have just duplicate the menu and move one at the end, change the display to mobile only and hide the middle menu on mobile only instead of duplicating the entire header. But really cool header right there
Thank you! hehe, yeah, why make my life easier when I can complicate it 😂 I used to do this in the past but this time for some reason my brain just did not want to remember!
That’s a good one @kennedy. By the way with the latest Elementor version you can order the menu items/components however you want. Search it up if you want. Super nice new feature!
to add my css code it requires me to upgrade to pro, i wanna know if that is needed
It’s not needed. You can download a code snippet app and add your code in there
@@andreaegli please which do you recommend?
What should we use if we don’t have containers and rather sections instead?
Use sections but I highly recommend using containers
@@andreaegli I don’t have the containers option in my Elementor… is there a way to gain them?
@@Max.ellenger Ok, so, Go to Dashboard > Elementor > Settings > Features > Flexbox Container turn this feature to Active and make sure to save your changes. Now, containers should be available to use in your editor
@@andreaegli You are the best! Thank you!!
@@Max.ellenger Thank you so much, Max1 You are very welcome!
I tried adding the cod, but the code didn't work
That is strange because I see it working. Have you added the class correctly?