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.
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;
}
Hi @crepscity,
To adjust the height of your header from being different to the same on every page, try to add the below code to your theme. Follow the below-given steps:
Go to your Shopify Admin and navigate to Online Store > Themes.
Click the Actions button (three dots) on the Dawn theme and select Edit code.
In the Assets folder, find and open the (base.css) file. Add the below-given CSS code inside that at the bottom.
.header-wrapper, .site-header {
height: 100px !important; /* Adjust this value to your desired height */
max-height: 100px !important; /* Ensures the height doesn't exceed this value */
display: flex;
align-items: center;
width: 100% !important;
}
I hope this will solve your issue.