Padding between mega menu submenus

Store Design
, , , ,
1

Hello all,

Hope you are well !

I’m trying to add a little space in between the submenus (not sure they are called like that) but basically, I would like to add some padding in between the different items to make it easier to read.

Karla8_0-1740057534656.png
Karla8_0-1740057534656.png941×221 20.8 KB

www.hintofhappiness.com

Thanks so much in advance for your help !

Karla

1 Like
2

Hi @Karla8

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.mega-menu__list.page-width a {
    padding: 5px 0;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

You rock ! thanks a lot !

1 Like
4

To add some space between the submenu items on your Shopify store, you’ll want to adjust the padding or margin in your theme’s CSS. Here’s how to do that:

Add Space Between Submenu Items1. Go to Shopify Admin:

  • Navigate to Online Store > Themes.
  • Click Actions > Edit Code on your active theme.

  1. Locate the CSS File:

    • Open theme.css, base.css, or another main stylesheet (the name depends on your theme).

  2. Add the Custom CSS: Add this code at the bottom of the file:

/* Add space between submenu items */
.site-nav__dropdown li {
    padding: 8px 0; /* Adjust value to control spacing */
}

  • Save and Preview:

    • Click Save and refresh your store to see the changes.
    • Adjust the 8px value as needed to increase or decrease the space.

If It Doesn’t Work:1. Inspect the Element:

  • Right-click on a submenu item and select Inspect (or Inspect Element).
  • Find the class applied to your submenu items. If it’s different, replace .site-nav__dropdown li with the correct class.

  1. Add More Specificity:

    • If other styles are overriding your changes, increase specificity:
nav .site-nav__dropdown li {
    padding: 8px 0 !important;
}

Easier Way with EasyEdits

I’m the developer of EasyEdits—a Shopify app that lets you customize your store’s design without touching code. It’s free to try, and you can keep your changes even if you don’t subscribe.

Let me know if you need any more help!