Header height in Dawn 15.4.0 is inconsistent between homepage, product, and collection pages; the goal is a uniform header without affecting logo or icons. Dawn is Shopify’s default theme; the fix centers on CSS (style rules that control layout), using a fixed/min height and flex alignment.
Suggested approach: add custom CSS in Theme settings or base.css to set a fixed header height (e.g., min-height: 80px), display: flex, and align-items: center so icons/menu stay centered. Screenshots show this did not work on product pages.
Investigation: after sharing a preview link, the root cause was identified as the “Good size chart” app injecting an element into the site header on product pages, which increases header height. Recommendation: reconfigure the app’s placement or contact the app’s support.
Interim workaround: the store owner added global CSS forcing header height to 80px with !important, adjusted related header variables, and zeroed padding to normalize the header across pages. (!important overrides other CSS.)
Outcome and status: a temporary CSS fix is in place; final resolution depends on correcting the app’s placement/configuration. Key open item: ensure the size chart button is not added to the header on product pages.
Hi everyone,
I’m using Dawn 15.4.0 and I need the header container height to be the same on all pages homepage, product pages, and collection pages.
I want to ensure the header matches the homepage height without affecting the logo, menu, hamburger, search, or cart icons.
Does anyone know the best way to achieve this in Dawn 15.4.0?
Thanks!
Yes, you can make the header container height consistent across all pages in Dawn 15.4.0 without affecting your logo or icons.
To do this, you’ll simply add a custom CSS rule that forces a fixed header height. Here’s the easiest method:
Go to Online Store → Themes → Customize
Click Theme settings → Custom CSS (or go to Edit code → base.css)
Add this CSS:
If your homepage header is taller due to extra sections (like announcement bar or transparent header), then you must match that exact height. You may adjust the value until it matches perfectly.
If needed, I can inspect your store and give you the exact perfect height to apply.
Let me know if you’d like me to handle it for you!
You just need to set a fixed height for the header container and make sure all icons stay centered. Add this inside Theme → Customize → Theme settings → Custom CSS:
header.header {
min-height: 80px !important; / adjust this number to match your homepage header height */
display: flex;
align-items: center;
}
.header__inline-menu,
.header__icon {
display: flex;
align-items: center;
}
Try that out and your header will look consistent on all pages. If you want, send me a screenshot or your current header height, and I can fine-tune the exact size for you!
Well, fresh clean Down usually does not do it.
There is a lot going on on your storefront, so sharing a link to your exact page (preview link if not yet published) would be a must.
Say, your particular page can have some CSS code added which produces this side-effect of stretching the header.
Trying to limit the height of the header as suggested would either not work or produce some ugly looking cropping.
As I suggested.
Why the hell “Good size chart” App tries to put their element in site header?
Check the App config about where it should put their size char button and/or contact their support.
And this explains why it happens on product pages, right?
I will now contact them, thank you for spotting that but for now i added this code to have the header normal:
/* Force global header container height to match homepage /
.header-wrapper,
header.header {
height: 80px !important; / adjust to your homepage height */
min-height: 80px !important;
max-height: 80px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Stop Dawn from dynamically resizing header */
:root {
–header-height: 80px !important;
–header-bottom-position: 80px !important;
}
