Change height of header in refresh theme

Shopify Discussion

Topic summary

A user asks how to modify the header height in Shopify’s Refresh theme to match the Dawn theme’s appearance.

Two solutions provided:

Solution 1 (PageFly-Lucas):

  • Navigate to Online Store → Theme → Edit code
  • Locate the base CSS file
  • Add CSS code at the bottom to reduce logo width to 50%
  • Save changes

Solution 2 (saartech):

  • Access theme code editor via Actions → Edit code
  • Find the main CSS file (typically theme.scss.liquid in Assets or Sections folder)
  • Search for header-related CSS selectors (classes or IDs)
  • Modify the height property (example: header { height: 100px; })
  • Adjust the pixel value until desired result is achieved
  • Preview and save changes

Note: Both responders emphasize that actual CSS selectors and properties may vary depending on the specific theme version. The discussion remains open with no confirmation from the original poster about which solution worked.

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

how can i chnge the height of header in refresh theme so that it look like dawan header?

2

Hi @Rechard

This is Lucas from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

img.header__heading-logo.motion-reduce {

width: 50%;

}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

3

Hi @Rechard
To change the height of the header in the Refresh theme to resemble the Dawn theme’s header, you’ll need to modify the theme’s code. Here’s a general approach to achieve this:

  1. From your Shopify admin, go to “Online Store” and select “Themes.”
  2. Locate the Refresh theme and click on the “Actions” button.
  3. Select “Edit code” from the dropdown menu.
  4. In the theme code editor, find the CSS file that controls the styling of the header. This file is usually named theme.scss.liquid or similar. It may be located in the “Assets” or “Sections” folder.
  5. Open the CSS file and search for the CSS selectors related to the header. Look for a class or ID that specifically targets the header element.
  6. Once you find the relevant CSS selector, modify the height property to adjust the height of the header. For example:
.header {
  height: 100px; /* Adjust the height as needed */
}
  1. Save the changes to the CSS file.
  2. Preview your website to see the updated header height. Adjust the value you set for the height property in the CSS code until you achieve the desired result. Please note that the CSS code provided above is a general example, and the actual CSS selectors and properties may differ in your theme.

Thanks & Regards
SaarTech || Shopify Partner