Want to fix the megamenu ( Shopify Minimog-5.1.0 theme )

Store Design
, , , ,
1

Hello Everyone!

I am using Shopify Minimog 5.1.0 Theme. I want to fix the megamenu. I want to have 5 columns per line and rest of the columns will show below. Also, when I hover over the megamenu ( AWARDS ) the search box in the header section is not showing. I want to show the search box. But when I click on the dropdown menu ( MEDALS ) the search box is showing. I want to fix this. Please help me. Thanks in advance.

Store: https://svelteclothes.myshopify.com/

Password: Admin

Screenshot (41)
Screenshot (41)1883×874 68.8 KB

3

Hi there,

I am Zuri from FoxEcom team - Minimog theme authors.

For proper guidance or hands-on theme support, please contact us directly via our support channel so we can review your store and advise accurately: https://foxecom.com/pages/contact-us

We’ll be happy to help you further there :blush:

4

Hi,

Hope this will help

  • Set fixed 5-column grid by adding custom CSS using grid-template-columns: repeat(5, 1fr)

CSS example

.mega-menu__content .mm-columns {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 20px;
}
  • Fix disappearing search box by increasing its z-index and lowering the mega menu’s z-index.
.header__search {
    position: relative;
    z-index: 9999; /* bring the search above the mega menu */
}

.mega-menu__wrapper {
    z-index: 50 !important; /* make sure the menu stays below the search */
}
  • MEDALS works because it uses a simple dropdown, AWARDS uses a mega menu which overrides header layering.