Horizon menu, sub menu alignment

Ask & Offer
1

Is there a way to make the sub menu items fall directly beneath the main menu link rather than aligning to the far left?

I am using Horizon.

Thanks!

Screenshot 2025-09-15 at 18.10.53
Screenshot 2025-09-15 at 18.10.531920×363 33.2 KB

Screenshot 2025-09-15 at 18.10.42
Screenshot 2025-09-15 at 18.10.421920×900 192 KB

2

Hi @benalexanderjon

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

3

Hi @benalexanderjon

Yes, you can absolutely make submenu items appear directly under the parent menu link instead of aligning left. By default, many Shopify themes (including Horizon) anchor dropdowns to the left edge of the navigation container, but a small CSS adjustment fixes this.

Try adding this to your theme’s CSS file (base.css or theme.css):

/* Align submenu directly under the parent menu item */
.header__submenu,
.site-nav__dropdown {
left: 50% !important;
transform: translateX(-50%) !important;
}

What this does:

  • left: 50% pushes the submenu horizontally to the center of the parent link.

  • transform: translateX(-50%) shifts it back so it sits perfectly beneath the parent.

If you prefer the submenu to align with the left edge of the parent link (instead of dead center), then use:

.header__submenu,
.site-nav__dropdown {
left: 0 !important;
transform: none !important;
}

That way, the dropdown will follow the main menu link, not the entire navigation container. And always test on both desktop and mobile because some themes use different markup for mobile navs.

4

Thanks! It’s www.sherlockandpages.com

5

Hi @benalexanderjon,

You can try with the following instructions, it will display fine. Refer: Shopify horizon theme meny drop down is very bad

6

Hey @benalexanderjon,

Thanks for posting this to Shopify community.

In order to make the Sub Menus in center mean under the Main Menu then you need to follow these steps.
Go to Shopify Admin >> Online Store >> themes >> Edit Code >> base.css
In the end of base.css paste the following code.

.mega-menu__column {
  grid-column: span 10 !important;
  margin: 0 auto !important;
}

Results:

image
image3839×853 171 KB

If you need more help then feel free to reach out.
Thanks

7

Hello - I’ve tried this solution (as well as all of the others posted - without success. I’m using the Dwell theme, which as part of the Horizon themes, I would hope something will work. I’ve tried pasting in the base.css as well as the theme.css without success :frowning: Any other ideas? Thanks in advance!