Mobile navigation dropdown not working with backdrop filter on the navbar
-
I’m making a website using the Hestia theme and I added a fancy backdrop filter with custom CSS. When I’m switching to the mobile layout and open the dropdown navigation it isn’t shown, but if I remove the backdrop filter everything works just fine. What am I missing?
-
Hi @alphacraft9658,
Thanks for choosing Hestia!
Please provide us the URL to your site so we can take a look at the issue.
Thank you!
Hi @luciamarinescu! The problem is, that I’m developing this in an AMP development stack on my local machine, so I can’t provide any URL. What I can do though is telling how to reproduce the issue. If you add a backdrop-filter to the navbar using custom CSS, the mobile dropdown navigation menu won’t be visible, if the navbar is set to non-transparent, so it has a visible background. I hope this is enough information to understand what I mean.
Hi @alphacraft9658!
Unfortunately, I am not able to replicate this issue, the mobile menu is displayed as expected on my test instance after adding a backdrop-filter to the navbar and, as we can’t check the issue on your site, it’s difficult to suggest a solution.
Have a nice day!
Hi @luciamarinescu! I migrated the site to a host and it still has the address of the previous website. But now I can give access to the site for you to check the problem. I have applied a blur backdrop-filter, which stops the mobile navigation dropdown from being displayed.
The domain is currently not available.
Hello @alphacraft9658,
Sorry for the delayed reply!
I checked the page you provided, but this is how it looks like for me. Could you please provide us a screenshot showing the issue and the CSS you used for the backdrop-filter?
Thank you!
Hello @luciamarinescu!
The site is currently broken and I don’t have access to it at the moment, because I made invalid changes to the configs. I need to get the FTP login data. I’m creating the site for someone else and that’s why I don’t have the login details myself.Hello @luciamarinescu! The site is back online now, and you can check it again. Sorry that it took so long.
- This reply was modified 2 years, 2 months ago by alphacraft9658.
Hi @alphacraft9658,
No worries, thanks for letting me know the site is back online!
I spotted the problem, it looks like when the menu is expanded, there is a max-height property whose values are not taken into consideration. I tested the code below on your site using the Inspect element and it seems to solve the issue – screenshot. Please add the code in the Additional CSS section within the Customizer and check if it fixes the issue.
@media(max-width: 768px){ #main-navigation.navbar-collapse.collapse.in { max-height: 340px !important; } }
Have a nice day!
@luciamarinescu Thank you! Now the menu is displayed again, but one thing is left: The animation isn’t playing. Do you know what’s the problem there?
Hello @alphacraft9658,
I have checked your site and the mobile menu animation is working fine on my device.
I also found some information related to this, that the backdrop filter styling is only supported in the latest version of mobile browsers, so I would suggest you update your device, browser all of them to the latest version, and try clearing the cache as well and then see if the issue still appears.Please let me know if the issue is solved.
Thank you and have an amazing day!
- The topic ‘Mobile navigation dropdown not working with backdrop filter on the navbar’ is closed to new replies.