FROSTED GLASS EFFECT NAVBAR - Elementor container edition

[@andreaegli]

Not your average Navbar let me know if this was helpful!

[@AtapuercasMan]

Estupendo tutorial me ha ayudado mucho, Gracias

[@andreaegli]

🤩

[@oscarhalling4510]

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!

[@andreaegli]

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

[@Rafa_Diogo]

@@andreaegli Hi Andrea, I love your content, thanks a lot for all the effort and time you put on it! I am trying to implement the blur effect to both my header container and to my nav menu dropdown but for some reason, I cant apply the effect to both place as it only considers the one in the header. But if I delete the effect from the header section, the effect works on the nav menu dropdown. Any idea why this is happening? Thanks

[@shonxu3955]

Very good tutorial❤

[@andreaegli]

Thank you 😊

[@ouddemrijttariq2076]

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 ?

[@andreaegli]

give it some offset instead of padding

[@mauprano]

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.

[@andreaegli]

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 kzbin.info/www/bejne/aHPFmJV-eruZd5I . Let me know if it worked!

[@marcoatmac]

Thank you, it's very cool!

[@andreaegli]

Happy to hear that you found this useful 😉

[@matejcalic4008]

Love it!

[@andreaegli]

Thank you 😊

[@dipanshubawa7402]

i like to see all your videos and you also 😅 your all videos are amazing just like you 🥰

[@dajunkid]

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

[@andreaegli]

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!

[@alekasandarmilosavljevic6767]

looks nice

[@andreaegli]

thank you!

[@Sujon_khan_]

That was so good

[@luckyeden3501]

to add my css code it requires me to upgrade to pro, i wanna know if that is needed

[@andreaegli]

It’s not needed. You can download a code snippet app and add your code in there

[@luckyeden3501]

@@andreaegli please which do you recommend?

[@AdityaSingh-ni7vn]

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

[@andreaegli]

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.

[@raylinebarbosaa]

THANNNNKSSSS!

[@andreaegli]

You're welcome!!!!!!

[@AITECH4YOU]

very nice and it is very helpful can you help me for some wordpress website projects please

[@andreaegli]

Thank you 😊 send me an email with the project details and we’ll take it from there 😉

[@moog6513]

WaOw !!! Awesome 😍🥰💯💫💥

[@Max.ellenger]

What should we use if we don’t have containers and rather sections instead?

[@andreaegli]

Use sections but I highly recommend using containers

[@Max.ellenger]

@@andreaegli I don’t have the containers option in my Elementor… is there a way to gain them?

[@andreaegli]

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

[@Max.ellenger]

@@andreaegli You are the best! Thank you!!

[@andreaegli]

@@Max.ellenger Thank you so much, Max1 You are very welcome!

[@arrunaahathyala2191]

I tried adding the cod, but the code didn't work

[@andreaegli]

That is strange because I see it working. Have you added the class correctly?

[@BuboD1]

Hi Andrea could you send me an export of this navbar please