Jump to content

Header CSS is preventing mobile menu from opening on Android

Go to solution Solved by tuanphan,

Recommended Posts

Hello all, 

I have added CSS to create a blur effect on the header and it works great. However, it seems that the line "background-filter" is causing the mobile menu to stop functioning on android devices (it works fine on iphone). Specifically when you click the hamburger icon, it changes to an X but the menu itself won't expand. I have tried a few adjustments to the CSS including adding a -webkit-background-filter line but nothing seems to work unless I completely remove that line. Any ideas? My header code snippet is below.

Website URL is www.adeptmedicalgroup.com
 

Quote

header {
margin: 1vw;
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(8px)!important;
border-radius: 45px
}

 

Edited by DarkHeartist
Link to comment
  • Replies 3
  • Views 964
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

You can consider exclude code on mobile only by changing the code to this

@media screen and (min-width:992px) {
header#header {
margin: 1vw;
background: inherit!important;
background-color: rgba(255, 255, 255, .3)!important;
backdrop-filter: blur(8px)!important;
border-radius: 45px
}
}

I also change header to header#header, because "header" appear on both Site Header and Summary Block Header

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.