Shopify Mobile Menu Not Functioning Correctly

Store Design
,
1

Hi,

I am having a couple of issues with the mobile version of the site. I am able to scroll out to reveal a lot of extra space. Also, if I click on any menu item with a submenu, it will not open and gets stuck on a blank menu where I cant ‘x’ out of the menu and can only reload or click the home page link to get back. Finally, the cart drawer does not scroll correctly and the checkout button is all the way at the bottom not visible. The cart issue happens on mobile and desktop but the other issues are mobile only. Really appreciate any help with this.

My site is nicegals.myshopify.com and password is test1

Thank you!!

2

Hi @gmoye ,

I supported you on this post https://community.shopify.com/c/shopify-design/sense-theme-make-collapsible-content-open-one-at-a-time/td-p/2575826

You should replace old code which code below:

document.querySelectorAll('[id^="Details-collapsible_"] summary').forEach((sum) => {
     sum.setAttribute('aria-expanded', false);
    })
    document.querySelectorAll('[id^="Details-collapsible_"]').forEach((details) => {
     details.removeAttribute('open');
    })

EBOOST_0-1716369357751.png
EBOOST_0-1716369357751.png1170×191 15.3 KB

1 Like
3

Hi @EBOOST ,

Thank you for your continued support. That fixed the issue with the mobile menu which is excellent. I am still having the other two issues - the mobile view has a lot of extra room on the right if zoomed out and the cart drawer doesn’t allow scrolling most of the time with the “add to cart” button all the way at the bottom and not visible. Thanks again!

4

Hi,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/base.css
  3. Add code below to end of file
body .menu-drawer {
  width: 100%;
}
.overflow-hidden,
.overflow-hidden-mobile, 
.overflow-hidden-tablet, 
.overflow-hidden-desktop{
  height: 100%;
  overflow: hidden!important;
}
1 Like
5

Looks like that did it. Thanks so much again @EBOOST !