How do I distribute the menu items in Shopify?

[Valeria_16]

Hello!
I have a question about the top menu in Shopify.:
How do I make the menu items evenly spaced (space-between)? as shown in the screenshot
And how can I make the nested menu bars be specifically under the menu item to which it belongs?
I will be grateful for the advice!

idaree

password: 1

[Godspeed001]

Hi there!
Good questions both of these are very common menu-layout tweaks in Shopify themes.

Evenly spacing the top-level menu items (space-between)

This is usually controlled by CSS, not by a Shopify setting.

In most themes, the main menu is wrapped in a flex container. To evenly space items, you’d typically need something like:

.header__inline-menu ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

Depending on your theme, the class names may be different (for example: .header-menu, .nav-menu, etc.), so you’ll want to inspect the menu in your browser to confirm the correct selector.

You can add this in:
Online Store → Themes → … → Edit code → base.css / theme.css

---

Aligning dropdown (nested) menus under their parent item

By default, many themes position dropdowns relative to the whole header instead of the individual menu item.

To make each dropdown appear directly under its parent, the parent menu item usually needs:

.menu-item {
  position: relative;
}

And the dropdown:

.submenu {
  position: absolute;
  left: 0;
  top: 100%;
}

Again, class names will vary by theme, but the key idea is:

• Parent = position: relative

• Dropdown = position: absolute anchored to the parent

---

Important note

Not all Shopify themes are structured the same way, and some hard-code spacing or dropdown positioning in JavaScript. If CSS changes don’t work right away, it’s likely theme-specific.

If you share:

• Your theme name

• Or a link to your store (or preview)

It’ll be much easier to give you exact selectors or a copy-paste-ready solution.

[Valeria_16]

The link is attached https://idaree.myshopify.com/ password: 1

[Paulmorin]

Shopify doesn’t do this by default; it’s a CSS fix.

• To space menu items evenly, the header menu needs Flexbox with space-between.
• To align dropdowns correctly, each menu item must be positioned relative, and the dropdown absolute, so it opens directly under its parent.

This requires a small edit in the theme’s CSS (usually the header file), not the menu settings.

Simple fix, widespread request.

[Jacob0908]

Hello @Valeria_16 I checked your store. It’s fixed on myside.
do you want to show like this?

please add custom style like this. when screen is desktop.

if it’s not working, let me know
Regards

[Valeria_16]

No, not really) I need to have the same distance between Shop, ingredients, logo, about and cart, as shown in the screenshot. And the drop-down menu should be under “about”

[suyash1]

@Valeria_16 your header is mixture of multiple sections, please add this css to the very end of your base.css file and check, it can be made like screenshot below

shopify admin->online store->themes->edit theme code->assets->base.css

@media screen and (minwidth:990px){
.header-menu__left{flex-basis: 30%; justify-content: space-evenly;  display: flex;}
.header-menu__left nav{width: 100%;}
.header-menu__left nav .overflow-menu{justify-content: space-between;  display: flex;  width: 100%;}

.header-row__logo{flex-basis: 30%;}
.header-menu__right{flex-basis: 25%; justify-content: center; display: flex;}
.header-cart{flex-basis: 25%;}
}

[Valeria_16]

this is not exactly what I need)

[suyash1]

@Valeria_16 yes, this is the beginning, it will need multiple css settings to do it, this is the start

[Valeria_16]

Okay, I did it and nothing changed) everything remained as it was.

[suyash1]

@Valeria_16 duplicate your theme, so that live site is not affected, remove the above one and please add css below

@media screen and (min-width:990px){
.header-menu__left{flex-basis: 30%; justify-content: space-evenly;  display: flex;}
.header-menu__left nav{width: 100%;}
.header-menu__left nav .overflow-menu{justify-content: space-between;  display: flex;  width: 100%;}

.header-row__logo{flex-basis: 30%;}
.header-menu__right{flex-basis: 25%; justify-content: center; display: flex;}
.header-cart{flex-basis: 25%;}
}