How to Increase Header Size in the Horizon Theme on Shopify

You want to increase the header size on the Horizon theme in Shopify, but you cannot find the option inside the theme editor.

The Horizon theme does not provide a built in setting to adjust header height, so the only way to increase it is by editing the theme code manually.

Increasing Header Size in the Horizon Theme

The process is simple and only requires adding a small CSS snippet. Once you update the file and save, the header height will increase for both mobile and desktop.

Start by going to your Shopify admin. Click Online Store in the left sidebar and then open the Themes page.

Find your current Horizon theme and click the three dots on the right side. From the dropdown, select Edit code.

Inside the code editor, open the file named base.css. Scroll to the bottom of the file and paste the following code:

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

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

Click Save and the header size on your store will update right away.

If you want to adjust the size further, you can modify the values inside padding block or min height.

Increasing min height makes the header taller and increasing padding block adds more space inside the header area. You can change those numbers to match the spacing you prefer for mobile and desktop.