Adjusting the header height in Shopify Horizon theme fine tunes layout, improves usability, and supports brand goals unlocking several strategic advantages:

Visual Balance

• Matches header scale with logo, menu, and hero content for a harmonious first impression
• Prevents oversized bars from crowding banners or product grids, especially on small screens
• Creates generous white space that elevates a premium minimalist aesthetic
• Keeps focus on hero imagery by minimizing competing chrome at the top of the viewport

User Experience

• Gives visitors more visible content above the fold, reducing initial scroll effort
• Improves tap accuracy on mobile when icons and links sit within an ergonomically sized zone
• Enhances accessibility by aligning link spacing and font size with recommended touch targets
• Supports sticky headers that feel unobtrusive rather than bulky during scroll

Branding Flexibility

• Allows seasonal or campaign tweaks by enlarging the header for special announcements without redesigning layouts
• Adapts to multilingual stores where longer menu labels might require extra vertical space
• Integrates with transparency or glass effects that look best at specific height ratios
• Aligns with logo refreshes or icon updates by resizing the bar to preserve proportion

Code :

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

  .header__columns {
    min-height: 30px;
    align-items: center;
  }

  .header__column {
    min-height: 30px;
    display: flex;
    align-items: center;
  }
}

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

  .header__columns {
    min-height: 80px;
    align-items: center;
  }

  .header__column {
    min-height: 80px;
    display: flex;
    align-items: center;
  }
}

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

  .header__columns {
    min-height: 30px;
    align-items: center;
  }

  .header__column {
    min-height: 30px;
    display: flex;
    align-items: center;
  }
}

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

  .header__columns {
    min-height: 80px;
    align-items: center;
  }

  .header__column {
    min-height: 80px;
    display: flex;
    align-items: center;
  }
}