Refresh Theme v14 - Menu Dropdown Issue

Store Design
, ,
1

Refresh Theme v14 - Menu Dropdown Issue - Visible but unable to select options in Mobile view. The menu options were working fine till I updated to v14. The Menu (3 lines) is clickable and displays the menu options when on the Home Page (www.booksandyou.in) but the menu options are greyed and cannot be selected. If I change the layout to horizontal (landscape view on mobile - flip the mobile 90 degrees), the options get enabled (no longer greyed and can be selected. So the menu options work fine on tabs and PC but only on mobile from the Home Page, the options cannot be selected. The menu options can be selected if on a different page on the website, like Shop Page or Blogs and are working fine.

Can anyone help me figure out? Raised with Shopify Support and they acknowledged it being a bug. I have not heard back on an ETA. Is there a fix to this?

From Home Page

Main Menu on Home Screen Not working.png
Main Menu on Home Screen Not working.png468×906 31.1 KB

From Product page / any other page the same menu is clickable

Main Menu from Product Page.png
Main Menu from Product Page.png434×906 29.6 KB

Thanks!

2

Hi @saurav_sriv

Check this one.

From your Shopify admin dashboard, click on “Online Store” and then “Themes”.

Find the theme that you want to edit and click on “Actions” and then “Edit code”.

In the “Assets” folder, click on “Component-localization-form.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media screen and (max-width: 749px) {
    .country-selector__overlay {
        position: absolute;
    }
}

And Save.

Result:

Made4uoRibe_0-1714571135234.png
Made4uoRibe_0-1714571135234.png523×752 23.8 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

3

Hi @Made4uo-Ribe ,

Thank you for your response. However implementing this code while allowing menu options to be enabled disables the country selector (same as on the screenshot you provided) while on the home page. This does not happen on the other pages.

Any other solution?

4

Try to add this code.

div:empty {
    display: contents;
}

And Save.

Made4uoRibe_0-1714572579704.png
Made4uoRibe_0-1714572579704.png673×226 6.19 KB

Did you just add an app for tracking?

They called some codes from the localization form that is why its acting like that.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

5

@Made4uo-Ribe , tried with the above code. Same issue. Where you place the code?

6

Can you locate the in the Asset folder tracking_index.css. And find this code.

Made4uoRibe_0-1714577581585.png
Made4uoRibe_0-1714577581585.png761×133 3.02 KB

And remove the div:empty,

Like this

Made4uoRibe_1-1714577622618.png
Made4uoRibe_1-1714577622618.png602×140 3.63 KB

And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

You may also try

.country-selector__overlay {
  pointer-events: none;
}
8 
@media screen and (max-width: 749px) {
    .country-selector__overlay {
        position: relative;
    }
}

@Made4uo-Ribe changed the position to relative helped solve the issue. Thank you for looking into it. @tim_1 - thanks for your response.