Need to have drop down menu closer to main menu

Store Design
1

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

Screenshot 2024-10-06 062151.png
Screenshot 2024-10-06 062151.png461×280 11.4 KB

2

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

3

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

4

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 tag

RESULT:

Moeed_0-1728218074084.png
Moeed_0-1728218074084.png466×213 4.89 KB

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

Best Regards,
Moeed

5

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

Screenshot 2024-10-06 064213.png
Screenshot 2024-10-06 064213.png467×273 14.2 KB

6

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 tag

RESULT:

Moeed_0-1728219104814.png
Moeed_0-1728219104814.png1356×456 38.5 KB

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

Best Regards,
Moeed

7

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

NewbieShop101_0-1728219360799.png
NewbieShop101_0-1728219360799.png459×259 7.93 KB

8

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

9

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.

10

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!