Want to fix the megamenu ( Shopify Minimog-3-5-0 theme )

Store Design
, , , ,

Topic summary

Goal: Adjust the Minimog 3.5.0 theme’s megamenu to show 5 columns per row, with additional items flowing to the next line.

Update & outcome:

  • A CSS override (added in theme.liquid before the closing ) uses CSS Grid to set the submenu to 5 equal columns and forces level-2 items to full width. The poster confirmed this fixed the desktop megamenu layout.
  • Central artifact: a CSS code snippet implementing grid-template-columns: 1fr 1fr 1fr 1fr 1fr and overriding submenu item widths (images shown for before/after).

New issue (mobile):

  • Subcollection links work on desktop but do not open product pages on mobile.
  • Analysis: On mobile, menu links differ; affected links have a data-toggle-submenu attribute, causing theme JavaScript to treat them as submenu triggers rather than navigational links, preventing page navigation.
  • Likely causes: menu misconfiguration or prior code edits altering the mobile menu markup/behavior.

Status & next steps:

  • First issue resolved with CSS.
  • Mobile-link issue remains open; requires reviewing theme configuration and/or code to remove unintended data-toggle-submenu on links or adjust JS logic so intended links navigate instead of toggling submenus.
Summarized with AI on December 10. AI used: gpt-5.
1

Hello Everyone!

I am using Shopify Minimog-3-5-0 theme. I want to fix the megamenu. I want to have 5 columns per line and rest of the columns will show below. Please help me. Thank you.

Store: https://urbanglowingstore.myshopify.com/
Password: Admin

Screenshot (30)
Screenshot (30)1898Ă—608 65.5 KB

1 Like
3

Please help me. Thank you.

4

Hey @dreamtechzone_5

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (min-width: 768px) {
li.list-none.sf__menu-item-level2.w-1\/2.xl\:w-1\/3.\32 xl\:w-1\/4.mb-4 {
    width: 100% !important;
}
ul.sf-menu-submenu__items.flex.-mx-2.w-full {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr !important;
}
}
</style>

RESULT:

image
image1386Ă—382 21 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

1 Like
6

Great, It worked. Thank you so much. One more thing, Subcollections are working on desktop, but they are not working on mobile. Why is this happening? Please help me.

Screenshot (31)
Screenshot (31)1875Ă—885 92 KB

7

Are you sure it’s an unaltered theme?

Somehow, these links have a data-toggle-submenu property which signals theme Javascript that this “button” should open a submenu rather then be a link to a new page.

8

Sorry, I don’t understand. When I click on Canada 4NF, it works fine in desktop mode and when I click on Canada 4NF, it shows all its products. But when I click on Canada 4NF in mobile mode, it doesn’t show any products.

9

Yes.
Menu links on desktop are not the same elements as menu links on mobile.

I have no idea about how your theme is configured.
What I am seeing is that when you click on the mobile menu link, it does not work as expected since theme Javascript prevents you from following the link because it “thinks” that this is not a link, but a submenu trigger.

It happens because this link has the data-toggle-submenu property set in HTML code.
Why it is set?
Either you’ve configured it in a wrong way or theme code does not work as intended. Can be because it was already edited.

It is difficult to say “from the outside” without seeing your theme code.