Debut theme navigation issues on mobile

Tourist
5 0 1

Is anyone else having issues with Navigation menus with more than one link not loading when on mobile? Links work fine in full screen. When it gets compressed some menu items dont show up and at times its also unclickable. Seems tempormental and im not sure what triggers causing it to work/not work. I've also tried mobile chrome and safari and both have these issues an I can replicate the issue on desktop if I make the window smaller.

Shopify Staff
Shopify Staff
639 16 212

Hi Matthew!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to optimise your mobile site so let's see how we can fix this. Before I troubleshoot this further I will need a few more details:

  • Which menu items are you experiencing issues with?
  • What devices are you testing on?
  • When did this effect start happening?

Once I have this info I'll be able to find a possible solution for you :)

Hope this helps Matthew, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

Liam Griffin
Shopify | Developer Community Manager
0 Likes
New Member
1 0 3

I was having the same problem with the Debut theme on mobile. I did some research on Google and here's how to fix it:

In the theme.scss.liquid file, around line 4211, add the following line "z-index: 300;"

.mobile-nav-wrapper {
  @include transform(translate3d(0, -100%, 0));
  position: absolute;
  background-color: $color-body;
  transition: $transition-drawer;
  display: none;
  overflow: hidden;
  width: 100%;
  z-index: 300;

 

This fixed the issue for me - all links in the menu on mobile are now clickable.

Cheers,

Irina

New Member
5 0 0

Thanks Irina, this worked for me.

0 Likes
Tourist
5 0 1

This did not resolve my problem. Anybody else out there have any fixes to this problem?

0 Likes
Tourist
5 0 1

Liam,

I am testing this on an iPhone 6s and my main menu is not working. 

0 Likes
New Member
1 0 0

Thanks Irina, that solved the problem for me too. I put  'z-index: 300;' on line 4505 in theme.scss.liquid.

I really appreciate you putting this info up.

Regards,

Brad

0 Likes
New Member
1 0 0

Thank you so much! I spent well over an over trying to fix the problem using js to no avail; this worked like a charm!

0 Likes
New Member
1 0 0

Thanks Irina_J

This worked perfectly for me, just had to scroll down to the Mobile Wrapper section.

I think I probably lost quite a few sales due to the dodgy menu on mobile devices, hopefully this will fix that now. :)

0 Likes
New Member
1 0 0

Thank you Irina! That fixed my issue perfectly! And to think when I contacted Shopify, all they could say was that there was no fix!

0 Likes