Shopify menu alignment doesn't work on safari and mobile view

[dreacen]

I am experiencing issues with the navigation menu in Safari and mobile view.

I have a drop-down in the navigation menu. I tested in Google Chrome which works fine, however, it doesn’t work in Safari. It doesn’t respond after clicking the drop-down button. The rest of the buttons (not drop-down) work fine.

This is what it should be like.

In mobile view, the whole menu alignment doesn’t respond.

Please advise as to how I can resolve this issue, any advice would be much appreciated. Thank you!!!
Kind regards
Drea

[diego_ezfy]

Hello @dreacen ,

Please share:

• your store URL;
• page URL with the issue you mention;
• storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

[dreacen]

Hello Diego,

Thank you for your quick reply.

Sure.

My URL is: https://dreastudiony.com/

I don’t know which URL I should share. It’s the “SHOP” in the alienation menu with a drop-down button that doesn’t respond.

Best,

Drea

[diego_ezfy]

@dreacen

Thanks. It seems like the custom you have under theme.js is throwing up some errors and breaking your website:

Chrome and Firefox tend to be more forgiving with Javascript errors, that is why it’s working fine on Chrome. However, Safari & Internet Explorer are harsher and usually they break all Javascript code of the website when some specific errors are found.

I’d suggest removing all of the custom code you have added under theme.js to ensure this is what is breaking the dropdown. In case that is actually the case, it would be necessary to contact a developer to fix the errors and properly implement the sticky nav in the website, ensuring it works across all browsers.

Kind regards,
Diego

[dreacen]

Hello,

Thank you for your help. I tested the original theme and find out it has the same problem. I will contact the developer. Thank you again!

Best,

Drea

[LitExtension]

Hi @dreacen ,

If you want to fix it, you can follow these steps:

• Step 1: Go to Assets > theme.js and find ‘$( “#shopify-section-product-template .product-single__media” ).position()’

• Step 2: Change code: https://i.imgur.com/qPBM1do.png , https://i.imgur.com/Eqx0GHQ.png

Code:

if ($("#shopify-section-product-template .product-single__media").position() == undefined ) {
	$prod_img = $( "#shopify-section-product-template .product-single__media" ).height();
} else {
	$prod_img = $( "#shopify-section-product-template .product-single__media" ).height() + $( "#shopify-section-product-template .product-single__media" ).position().top;
}

Hope it helps!

[dreacen]

Hello @LitExtension ,

Thank you for your help. Unfortunately, I only have a smattering of knowledge about coding.

From what I understand from you: Change code: https://i.imgur.com/qPBM1do.png to Code: https://i.imgur.com/Eqx0GHQ.png

This is the Code:

if ($("#shopify-section-product-template .product-single__media").position() == undefined ) {
	$prod_img = $( "#shopify-section-product-template .product-single__media" ).height();
} else {
	$prod_img = $( "#shopify-section-product-template .product-single__media" ).height() + $( "#shopify-section-product-template .product-single__media" ).position().top;
}

Am I with you?

Best Regard,

Drea

[LitExtension]

Hi @dreacen ,

It’s not, because of this file you will find 2 places to add that code. My screenshot shows you more about those 2 places. Now, you just need to change the whole code according to the screenshot I sent to my code, it will work fine.

Ex: https://i.imgur.com/Oo6U5tR.png => https://i.imgur.com/4sUaCf8.png

Hope it is clear to you.

[dreacen]

Hello @LitExtension ,

I tried. It doesn’t work.

I’m desperate.

[LitExtension]

Hi @dreacen ,

I checked and it still hasn’t changed.

If you want, you can send me your staff account or theme.js . file. I will check and fix it.

[dreacen]

Hi @LitExtension ,

Because I tested the original theme from the developer. Because it doesn’t work, so I switched back to the one with my own custom setting. That will be awesome if you can fix it for me. Thank you very much. I direct messaged you. Please check your message box. Thanks a million!

Best,

Drea

[LitExtension]

Hi @dreacen ,

Go to assets/theme.js, in line 7865 and 7899, change code:

https://i.imgur.com/F2VO99C.png => https://i.imgur.com/LwXw7dZ.png

Code:

if ($("#shopify-section-product-template .product-single__media").position() == undefined ) {
	$prod_img = $( "#shopify-section-product-template .product-single__media" ).height();
} else {
	$prod_img = $( "#shopify-section-product-template .product-single__media" ).height() + $( "#shopify-section-product-template .product-single__media" ).position().top;
}

I tested and it works fine.

Hope it is clear to you.