Solved

MEGAMENU ISSUE ON MOBILE

AzizBOUTALEB
Tourist
4 0 1

The menu appears correctly on desktop, but on mobile devices, the items are cut off and incomplete. This is causing a significant user experience issue and affecting my store's conversion rate.
My store is : Website. ( please see it on mobile )
Password : Taha26

I have attached a screenshot of the menu issue for your reference.

 

Accepted Solution (1)

kaiyaa
Explorer
254 19 24

This is an accepted solution.

Hello @AzizBOUTALEB 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
@media(max-width:1399px)
{
ul.sub-menu-lists.dt-sc-column.five-column {
    grid-template: none !important;
}
}
</style>

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me

View solution in original post

Replies 3 (3)

Victoria
Shopify Staff
2221 152 259

Hi there, @AzizBOUTALEB.

 

Welcome to the Shopify Community, and thanks for posting your question.

 

I had a chance to view your website on both desktop and mobile. When clicking into the main menu navigation on mobile, I can see that the menu items are cut off on the right-hand side. 

 

To gather a bit more context on the issue, are you able to provide information on the following:

 

  • What theme are you currently using?
  • Have there been any changes made to your themes code?
  • When did the issue first start?
  • Have you recently installed any new apps?
  • Are you able to replicate the issue in a fresh theme by previewing it on mobile? 

Victoria | Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

kaiyaa
Explorer
254 19 24

This is an accepted solution.

Hello @AzizBOUTALEB 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

<style>
@media(max-width:1399px)
{
ul.sub-menu-lists.dt-sc-column.five-column {
    grid-template: none !important;
}
}
</style>

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
AzizBOUTALEB
Tourist
4 0 1

I can't believe it, your solution worked, you are truly a genius, I will never forget your help, thank you very much, thank you very much, you are a great person