How to send the mega menu below the header Title

Store Design

Topic summary

A user seeks to reposition their mega menu’s submenus to appear below the header title, providing a reference image showing the desired layout.

Solutions Offered:

Two community members provided CSS-based solutions:

  • First approach: Add custom JavaScript/CSS code above the </body> tag in theme.liquid to modify menu positioning
  • Second approach: Insert CSS code into main.css targeting specific menu classes with properties like display: flex, flex-flow: column, negative margins (-40rem, -21rem), and grid template adjustments

Current Status:

The original poster requested the submenu display in a horizontal 3x3 layout (like the reference image). A revised CSS solution was provided adjusting grid-template-columns to repeat(3, minmax(0, 1fr)) and modifying margin values.

The discussion appears resolved, with the user accepting one of the solutions. Both helpers requested likes/solution marks for their contributions.

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

Hi,

How to send the mega menu below or under the mega menu sub menus to under the title header like it shown in the reference image

url - https://jkv6etaxearo1rr6-88161681693.shopifypreview.com

Shivam_Learning_3-1728365494822.png
Shivam_Learning_3-1728365494822.png788×418 8.91 KB

2

Hey @Shivam_Learning

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 tag

RESULT:

Moeed_0-1728365865084.png
Moeed_0-1728365865084.png1893×473 106 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @Shivam_Learning
Go to online store ---------> themes --------------> actions ------> edit code------->main.css
at the end of the file and save.

@media (min-width: 769px) {
.child-nav.md\:grid.md\:nav-gap-x-16.md\:nav-gap-y-4.md\:grid-cols-4.self-start.xl\:grid-cols-4 {
display: flex;
flex-flow: column;
align-items: center;
row-gap: 5px;
}
.mega-nav--columns .child-nav__item, .mega-nav--columns .main-nav__grandchild {
margin-left: -40rem;
margin-top: 23px;
}
}

result

3.png
3.png798×501 51 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Hi thanks, The below menu should look horizontal 3x3 like the reference

5

Go to online store ---------> themes --------------> actions ------> edit code------->main.css
at the end of the file and save.

.main-nav__item.child-nav__item {
margin-left: -21rem !important;
margin-top: 35px !important;
}
.xl\:grid-cols-4 {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}

result

7.png
7.png1030×407 53.9 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6

Thanks for accepting the solution
please hit like button also.