How to Increase Header Size in the Horizon Theme on Shopify

The Horizon theme does not include a header height control in the theme editor. If you want a taller header, the only way to get there is by adding a CSS snippet to the theme code.

This is a safe and straightforward change. You are not modifying any Liquid templates or JavaScript. You are adding new CSS rules at the bottom of an existing stylesheet, which means your changes will not conflict with the theme's existing styles.

Where to Add the Code

Go to your Shopify admin. Click Online Store in the left sidebar, then Themes.

Find your Horizon theme. Click the three dots on the right side of the theme and select Edit code.

In the file tree on the left, open the Assets folder. Look for the file named base.css and click it to open it.

Scroll to the very bottom of the file. Click at the end of the last line of code, add a blank line, and paste the snippet below.

The CSS Snippet

/* Horizon theme - custom header height */

@media screen and (max-width: 749px) {
  .header {
    padding-block: 7px;
    min-height: 30px;
  }
}

@media screen and (min-width: 990px) {
  .header {
    padding-block: 20px;
    min-height: 80px;
  }
}

Click Save. Open your store in a new browser tab to see the updated header.

What Each Property Does

Understanding what you are changing makes it easier to adjust the values later.

padding-block adds space inside the header above and below its contents. If your header contains a logo and navigation links, increasing padding-block pushes those elements further from the top and bottom edges of the header bar. The header grows taller because the space inside it increases.

min-height sets the minimum total height of the header element in pixels. If the content inside the header is already taller than this value, min-height has no visible effect. If the content is shorter, min-height forces the header to reach that height regardless.

In most cases, padding-block is the main lever. min-height acts as a floor to prevent the header from shrinking on pages where it has less content.

How to Adjust the Values for Your Store

The values in the snippet are starting points. Adjust them to match what you need.

For a larger header on desktop, increase padding-block from 20px to 30px or 40px. For a significantly taller header, combine a larger padding-block with a larger min-height.

For mobile, be more conservative. Mobile screens have less vertical space, and a tall header pushes page content further down. The default 7px padding and 30px min-height keep the mobile header compact while still giving you control.

You can also add a rule for the mid-range breakpoint between 750px and 989px if you need different values for tablets:

@media screen and (min-width: 750px) and (max-width: 989px) {
  .header {
    padding-block: 14px;
    min-height: 60px;
  }
}

Paste this between the mobile and desktop rules.

Why This Approach Works

CSS rules that appear later in a stylesheet override earlier rules with the same specificity. By placing your code at the bottom of base.css, your values take priority over any header rules the Horizon theme defined earlier in the same file. You are not deleting or editing the theme's original rules; you are adding new ones that win by position.

This also means that when Shopify releases a Horizon theme update, your snippet stays at the bottom of base.css and continues to override the defaults. Theme updates do not remove code you added unless the update replaces the file entirely, which is uncommon for minor updates.

If the Header Is Not Changing

If you save the file and the header looks the same, the most common reason is browser caching. Open your store in an incognito window or hold Shift and click the browser refresh button to force a reload.

If it still looks the same, check that you pasted the code into base.css and not another file, and that you clicked Save after pasting.

It is also worth checking whether your theme has a custom CSS field in the theme editor under Theme settings. Some themes apply inline styles through this field that can override stylesheet rules. If you find a .header rule there, remove it or update it directly.

Changing the Logo Size Within the Header

Increasing the header height often reveals that the logo looks small relative to the new header area. In the Horizon theme, logo size is controlled through the theme editor, not CSS.

Go to Online Store, Themes, Customize, and open the Header section. Look for a Logo width or Logo max width setting. Increasing this will scale up the logo to fill the larger header more naturally.

If your theme editor does not expose this setting, you can target the logo image in CSS:

@media screen and (min-width: 990px) {
  .header__heading-logo {
    max-width: 200px;
  }
}

Adjust 200px to the width that looks right with your logo. Add this to the same area at the bottom of base.css.