How to make my Sub-Menu appear in columns?

Store Design
, ,

Topic summary

A user seeks to improve their sub-menu display by organizing items into multiple columns instead of a single vertical list and reducing excess black space around menu text.

Solution Provided:

  • Add CSS code to the base.css or theme.css file using a media query (min-width: 600px)
  • The code applies display: grid and grid-template-columns: auto auto to create a multi-column layout for the mega-menu

Follow-up Issue:
The user requests the sub-menu to disappear when the mouse moves away, as it currently remains visible after hovering.

Attempted Fix:
A JavaScript solution was suggested involving code added to the theme.liquid file above the </head> tag. However, this caused the sub-menu to disappear too quickly—before users could click on items.

Status:
The column layout issue is resolved. The hover behavior problem remains unresolved, with the user deciding not to pursue it further.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Could I somehow make my sub-menu look better? For example:

Make my sub-menu items appear in two or multiple columns. So it is not just on one side.

OR

Reduce the amount of Black Space (only make the black appear around the wording of the menu items)

Menu Screenshot
Menu Screenshot1892×841 228 KB

TIA

https://elnisfinancials.myshopify.com/

1 Like
2
  • Here is the solution for you @LSAccounting
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (min-width: 600px) {
.mega-menu .mega-menu__list--condensed {
    display: grid !important;
    grid-template-columns: auto auto !important;
}
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721831659130.png
BSSTekLabs_0-1721831659130.png1893×586 88.9 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
3

Perfect.

However,

Would you know how to make the menu disappear when the mouse moves off the sub-menu? At the moment when I hover on the menu, the sub-menu with columns comes up and just stays there.

TIA

1 Like
4

  • Then find the theme.liquid file.

  • Then add the following code at the end of the file and press ‘Save’ to save it.

  • Add this code above tag

  • Can you try it @LSAccounting

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

1 Like
5

This one has made it disappear before we can click on any of the sub-menu items. Never mind!

Thank you anyways.

1 Like
6

Glad to help you. Have a good day @LSAccounting .

1 Like