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 ;)
@@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
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 ?
Love your videos Andrea! I added the glass effect to my header container with success. But now I also want to add it on my wordpress menu dropdown, but it does not work while I have it on the header container. Im using this to the dropdown: selector { backdrop-filter: blur(60px); -webkit-backdrop-filter: blur(60px); }
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 ruclips.net/video/2BbgbHEVfA0/видео.html . Let me know if it worked!
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!
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.
@@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
![BLACK BAG - Official Trailer [HD] - Only in Theaters March 14](http://i.ytimg.com/vi/Du0Xp8WX_7I/mqdefault.jpg)
Not your average Navbar let me know if this was helpful!
Love it!
Thank you 😊
Estupendo tutorial me ha ayudado mucho, Gracias
🤩
Very good tutorial❤
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 ;)
@@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
@@andreaegli it doesnt work
looks nice
thank you!
Thank you, it's very cool!
Happy to hear that you found this useful 😉
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 like to see all your videos and you also 😅 your all videos are amazing just like you 🥰
What she did after type "Navo" here? 3:10 Nothing happens when I type
That was so good
Love your videos Andrea!
I added the glass effect to my header container with success. But now I also want to add it on my wordpress menu dropdown, but it does not work while I have it on the header container. Im using this to the dropdown:
selector {
backdrop-filter: blur(60px);
-webkit-backdrop-filter: blur(60px);
}
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 ruclips.net/video/2BbgbHEVfA0/видео.html . Let me know if it worked!
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!
Valar Morghulies
I just updated my elemtor pro, why i can not adjust the site setting? so my nav menu its so wide, from end to end :(
Any help?
Thanks
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?
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.
for me it's not working, my header showing in full width, I tried all the way but it is still not working
did you follow all the steps in the video?
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!
THANNNNKSSSS!
You're welcome!!!!!!
very nice and it is very helpful can you help me for some wordpress website projects please
Thank you 😊 send me an email with the project details and we’ll take it from there 😉
WaOw !!! Awesome 😍🥰💯💫💥
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?
Hi Andrea could you send me an export of this navbar please