Need to have drop down menu closer to main menu

[NewbieShop101]

Hi All,

Need some help with positioning the sub-menu just below the main menu header.  It looks like it is in the "heading" part instead of the "header".  I am using the Mega-Menu in Craft Theme.

Any help is appreciated.

Thanks

 

[Moeed]

Hey @NewbieShop101 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[NewbieShop101]

Sorry about that,  URL is https://therightkitchenequipment.com/.  No password on website

[Moeed]

Hey @NewbieShop101 

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>
.mega-menu__link--level-2 {
    font-size: 19px !important;
    padding-bottom: 20px !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[NewbieShop101]

Sorry, didn't work.  The yellow represents the space I would like gone and the sub-menu to be right under the main menu

 

[Moeed · Accepted solution]

Hey @NewbieShop101 

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>
div#MegaMenu-Content-2 {
    padding-top: 5px !important;
}
header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-account.header--has-localizations {
    padding-bottom: 5px !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[NewbieShop101]

OK, that sort of worked.  The "KITCHEN EQUIPMENT" is perfect but the "COOKWARE' still has the problem

[NewbieShop101]

OK, I figured it out.  All I had to do was copy and paste

div#MegaMenu-Content-2 {
    padding-top: 5px !important;
}
header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-account.header--has-localizations {
    padding-bottom: 5px !important;
}

 your code and change the "div#MegaMenu-Content-"2 to "div#MegaMenu-Content-3".

Thanks for your help

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[jimy980]

To position the sub-menu just below the main menu header in the Mega-Menu of the Craft Theme, you can adjust the CSS. Inspect the sub-menu element, find its CSS class, and add custom CSS to shift the sub-menu down by modifying its position or margin. Adjust the values until it aligns properly below the main menu. Let me know if you need further assistance!