Jump to content

wells hamburger/sandwich (mobile) stopped working since iOS 16.4.1

Go to solution Solved by paul2009,

Recommended Posts

Hello! would like to know if anyone is having the same issue with Wells template on the new IOS version 16.4.1. The menu doesn't click and won't open properly. It used to work before but there seems to be a compatibility issue I dunno. 

Anyone experiencing the same ? 

Link to comment

I just tested this and it I had no issues. Do you have any custom code installed?

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

We can then take a look at your issue.

You may find How to post a forum question post useful.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hi there,

Today I updated my iPhone to iOS 16.4.1 and noticed that the hamburger icon did't work anymore. Everything looks perfect but there is no reaction on tapping the icon.

I used this code (which was working perfectly):

 /* Replace "Menu" with sandwich menu on mobile only. */
  #mobileMenuLink li.active-link a {
     visibility:hidden;
  }
  #mobileMenuLink li.active-link a:before {
     margin: 16px -35px 0px 0px;
        visibility: visible;
     font-family: 'squarespace-ui-font';
     font-size: 3em;
     font-style: normal;
       color: #c3c3c3;
     speak: none;
     font-weight: normal;
     -webkit-font-smoothing: antialiased;
     content: "\e030";
     text-align: right;
     display: inline-block;
     vertical-align: middle;
  }

Hope someone can help.

Thanks a lot, Peter

Edited by Peter_G

Photographer, Amsterdam, the Netherlands ---------- http://www.peter-gerritsen.com

Link to comment
  • Solution
3 hours ago, Rayan said:

would like to know if anyone is having the same issue with Wells template on the new IOS version 16.4.1. The menu doesn't click and won't open properly.

1 hour ago, Peter_G said:

I updated my iPhone to iOS 16.4.1 and noticed that the hamburger icon didn't work anymore. I used this code...

As @creedon pointed out above, the Wells mobile menu should still be working on iOS 16.4.1. However, if you have used CSS to hide the original mobile menu link (as @Peter_G has) then it will no longer function as the hidden element can no longer be tapped (undocumented).

You should be able to resolve this by making it transparent instead of hidden. To do this, replace this:

#mobileMenuLink li.active-link a {
 visibility:hidden;
}

with this:

#mobileMenuLink li.active-link a {
  color: transparent;
}

Let me know if this helps.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.