Mobile Nav Element Not Working

dahliaa
New Member
9 0 0

Hello!

I recently inherited a custom Shopify store and have been working through some bugs to create a more viable MVP.
At the moment, all nav bar elements work on desktop, but for some reason the one nav element ("EXPLORE") that does not have any children does not work on Mobile (please note this bug is not visible in the inspector and can only be replicated on an actual iPhone!).

I've tried a few different routes but can't seem to figure out where the disconnect is.

Preview links is as follows: https://n61g8j1vfcy515m0-44695715993.shopifypreview.com

0 Likes
g33kgirl
Shopify Partner
321 95 110

@dahliaa I can see a lot of JS errors in the dev console. It could be something to do with the JS plugin that you're using for navigation specifically this line in your JS file:

 

TypeError: Cannot read property 'classList' of undefined
    at n (layout.theme.js?v=10508201567535050176:formatted:792)

 

 line 792 is:

 

line 791>>> var e = t.querySelectorAll(".js-link");
line 792>>> t.querySelectorAll(".sub-open")[0].classList.remove("sub-open");

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
0 Likes
dahliaa
New Member
9 0 0

Thank you! Yes the console has been freaking out with a lot of errors, but I'm more of a front end gal, so solving for this has been challenging.
Appreciate your input - any other advice you have to successfully solve for this would be great

 

javascript event listener code:

dahliaa_0-1628183327889.png

Accompanying menu nav code:

dahliaa_1-1628183426765.png

 

As a reminder the "EXPLORE" link on mobile is the link that does not function. Thank you!

0 Likes