Centering Drop Down Menus in Horizon Theme

Technical Q&A
1

Screenshot 2026-01-15 at 10.37.11 AM
Screenshot 2026-01-15 at 10.37.11 AM1920×929 96.6 KB

Hi Everyone! Can anyone help me with this drop down menu alignment in the Horizon theme? When you hover over “Hall” the drop down menu is way over to the left and it’s kind of awkward to get to. And when you hover over “Shop” it looks like there’s an empty column on the right, and I’d like to remove that. Basically I’d just love to center the content for each drop down menu. Thank you!

1 Like
2

Well, that’s the decision theme designers made.

Horizon uses megamenu meaning that empty space on the right should be filled by the collection/product images or collection/product links should be shown with images.

Menu block in the Header section has a “Submenu feature” setting to control this.

The change you want may be a bit too complex to implement – try searching forum for suggestions.

This topic has some – Shopify horizon theme meny drop down is very bad and namphan claims that his is indeed a solution (has not tried myself though).

1 Like
4

Hi @Sunscript and @tim_1 … Thank you so much for your responses! I appreciate you taking the time to help. I was able to use the information you gave me to fix everything and here is the code in case anyone else runs across this issue:

/* Main Desktop Menu Adjustments */
@media (min-width: 990px) {

  /* SHOP mega menu: squeeze overall width + center the whole block */
  .mega-menu:has([data-menu-grid-id="MegaMenuList-2"]) {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center the grid block within the dropdown area */
  [data-menu-grid-id="MegaMenuList-2"] {
    justify-content: center !important;
    column-gap: 56px; /* tweak 40–72 */
  }

  /* LEFT-align text (headings + links) */
  [data-menu-grid-id="MegaMenuList-2"] .mega-menu__column,
  [data-menu-grid-id="MegaMenuList-2"] .mega-menu__link {
    text-align: left !important;
  }

  /* Keep your column count override */
  [data-menu-grid-id="MegaMenuList-2"],
  [data-menu-list-id="MegaMenuList-2"] {
    --menu-columns-desktop: 5 !important;
  }
}

/* Hall Menu Adjustment */
@media (min-width: 990px) {
  [data-menu-grid-id="MegaMenuList-3"] {
    grid-template-columns: max-content !important;
    justify-content: center !important;
  }
}
2 Likes