How to send the mega menu below the header Title

Store Design
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.