I need to add other layers to my navigation menu

Shopify Apps

Topic summary

  • Goal: Add deeper layers to a Shopify navigation (e.g., place “Rings” under “Tree of Life Collection”) and refine menu spacing.

  • Solution proposed: Use the Meteor Mega Menu app for multi-tiered mega menus. It supports images (desktop and mobile) and a demo store was provided for reference.

  • Styling request: Increase the vertical space between the first and second lines of Collections in the menu. Guidance given to add a CSS rule: #meteor-desktop-nav { row-gap: 10px; }, adjusting the pixel value as needed.

  • Implementation details: Place the CSS in the theme’s settings under “custom CSS” (scroll to the bottom). A screenshot was shared to show where to paste the code.

  • Communication note: The poster mentioned emailing support; the provider said no email was received and re-shared the support email address.

  • Status: Clear steps and code snippet provided; images/screenshots were used to illustrate the menu and settings. Resolution appears likely once the CSS is added, but the thread remains open pending confirmation.

Summarized with AI on January 2. AI used: gpt-5.
1

Hey,

I need to add some more layers to my Navigation Menu. I’ve looked at a few apps, but what would you suggest?

For example:

JeanneM13_0-1710605319907.png
JeanneM13_0-1710605319907.png639×223 9.24 KB

I need “Rings” to go under “Tree of Life Collection.”

Please don’t contact me anywhere but here. I won’t answer.

No, I don’t want to hire you. I just want a little advice.

Thanks,

Jeanne Melanson

CosmicSerenityShop.com

2

Hello Jeanne,

Multi-tiered mega menus are exactly why we created Meteor Mega Menu. In addition to image/logo support, we also built a template to include images on a mobile menu.
You can see it in action, here: https://meteor-outdoor.myshopify.com/
I hope this helps.

1 Like
3

Thank you, Benjamen. Is there a way to create a bigger space between the first and the second line of Collections in the menu?

JeanneM13_0-1710794203001.png

Jeanne Melanson

CosmicSerenityShop.com

4

Hello Jeanne,
Your menu is looking really great!
After checking with our incomparable support team, you can use this CSS rule:

#meteor-desktop-nav {
row-gap: 10px;
}
This allows you to adjust the pixel value as needed to increase/decrease the spacing. If that is too in the weeds, we’ve love to assist you more, just reach out to: support@heliumdev.com
Great work so far!

5

Email sent.

Thanks!

1 Like
6

Benjamin,

Can you tell me where to put that code? I have to fix it soon. It’s not working as it is.

7

Hello Jeanne,
We just double checked, and it doesn’t look like support received an email from you. The code snippet goes in your theme settings under “custom CSS” (you’ll have to scroll all the way to the bottom :blush: ).
Just copy and paste in:

#meteor-desktop-nav {
row-gap: 10px;
}

Benjamen_0-1711034606970.jpeg
Benjamen_0-1711034606970.jpeg3212×2066 624 KB

I hope this helps. Again, if you need further assistance, please don’t hesitate to reach out to support@heliumdev.com