Your Shopify Horizon header is too short. There is not enough space above and below the logo and menu, so the header does not look the way you want it to.

You want to make it taller, but the theme editor does not have a field for choosing the exact height. You also do not know which CSS controls that space.

The fix is a small CSS rule in the theme's Custom CSS field. It adds space above and below the header content, with separate values for mobile and desktop. Add the code below, then adjust the numbers to suit your store.

Increase the header size in the Shopify Horizon theme

Add the CSS

Start with this version:

/* Make the Horizon header taller on mobile */
@media screen and (max-width: 749px) {
  .header {
    --header-padding: 12px !important;
  }
}

/* Make the Horizon header taller on desktop and tablet */
@media screen and (min-width: 750px) {
  .header {
    --header-padding: 24px !important;
  }
}

The 12px value controls the space above and below the header content on mobile. The 24px value does the same on larger screens.

Increase those numbers if you want a taller header. For a smaller header, reduce them.

Where to paste the code

Use the theme editor first:

  1. In Shopify admin, go to Online Store and open Themes.
  2. Click Edit theme beside your Horizon theme.
  3. Open Theme settings.
  4. Open Custom CSS.
  5. Paste the CSS and click Save.

Shopify's theme-level Custom CSS applies across your storefront. It does not apply to checkout.

Open your storefront after saving and check that the header is taller.

If the header does not change

Check these things in order:

Make sure you edited the right theme. An unpublished theme does not change the live store. Open the theme preview or edit the theme that is currently published.

Check that the code was saved. Reopen the Custom CSS field or base.css and confirm the code is still there.

Refresh without the cached CSS. Open the store in a private browser window or use a hard refresh.

Once the header looks right, leave the CSS in the theme settings. Recheck the spacing after changing the logo, menu, or header layout so those elements continue to fit comfortably.