Hello there,
I am trying to customize dawn theme header to look like the pictures attached.
desktop and mobile
Thanks in advance
Topic summary
A user seeks to customize the Dawn theme header to match specific desktop and mobile designs shown in attached images. The desired layout appears to involve repositioning header elements.
Solution provided:
- Navigate to Online store > Themes > Customize > Header
- Set Desktop logo position to “Middle left” and save
- Access Online store > Themes > Edit code
- Open theme.liquid file
- Add custom CSS code below the
<head>element
The CSS snippet targets the header layout using media queries for screens wider than 990px, adjusting the grid template columns to position elements appropriately (specifically for .header.middle-left class).
Note: The conversation text appears partially corrupted or reversed in places, but the core technical guidance for header customization through theme settings and CSS modification is clear.
Hi @simoel
Go to Online store > Themes > Customize > Header > Desktop logo position > Middle left and save setting.
Then go Online store > Themes > Edit code > find and open theme.liquid, add this code below under element
@media (min-width: 990px) {
.header--middle-left {
grid-template-columns: 8fr auto 1fr !important;
}
}
