How can I decrease the header height in Refresh Theme?

Store Design

Topic summary

A user seeks guidance on reducing the header height in Shopify’s Refresh theme.

Proposed Solutions:

  • Add custom CSS to base.css (via Online Store → Theme → Edit code → Assets) targeting the header element with padding adjustments
  • Insert code into theme.liquid file before the </head> tag

Current Status:

  • Multiple support providers have requested the store URL to provide tailored assistance
  • No confirmed resolution yet; the discussion remains open pending further details from the original poster

Note: Some responses contain garbled/reversed text, making specific code snippets difficult to verify, but the general approach involves CSS customization through theme files.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

How may i reduce Header Height using Refresh Theme?

2

@starfashion84 ,

header.header.header--top-center.page-width.header--has-menu {
    padding: 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->base.scss.liquid

3

Hello @starfashion84

I would like to give you some recommendations to support you

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid theme file
  3. Paste the below code before

If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team

4

@starfashion84 Please send me store url.

5

Hello @starfashion84
Please share your store URL.