How can I rearrange the header in Dawn 11.0.0 theme?

[yoomzy]

Hi guys! I’ve attached screenshots showing how I’d like to rearrange my header for the dawn theme.

Basically, the logo should be positioned to the left, and the hamburger menu towards the right end.

Thank you in advance, any help is appreciated.

My store url: https://hjskr1-testing.myshopify.com/

password: enter

[Dan-From-Ryviu]

Hi @yoomzy

Go to your Online store > Themes > Edit code > open base.css file, add this code at the bottom

@media (max-width: 767px) {
.header { 
    grid-template-columns: 2fr 2fr 1fr !important; 
}
header-drawer {
    grid-area: icons !important;
    justify-self: end !important;
}
.header__heading, .header__heading-link {
    grid-area: left-icons !important;
    justify-self: start !important;
}
.header__icons {
    grid-area: heading !important;
    justify-self: end !important;
    padding-right: 0 !important;
}
}

[yoomzy]

Hey, this worked perfectly. You’re awesome! Do you know how to change image banner buttons into underlined buttons too? (like the screenshot below)

[Dan-From-Ryviu]

Please update code to this

@media (max-width: 767px) {
.header { 
    grid-template-columns: 2fr 2fr 1fr !important; 
}
header-drawer {
    grid-area: icons !important;
    justify-self: end !important;
}
.header__heading, .header__heading-link {
    grid-area: left-icons !important;
    justify-self: start !important;
}
.header__icons {
    grid-area: heading !important;
    justify-self: end !important;
    padding-right: 0 !important;
}
.banner__buttons .button {
    padding: 0px !important;
    min-width: fit-content !important;
    min-height: auto !important;
    text-transform: uppercase !important;
}  
.banner__buttons .button--secondary:after {
    box-shadow: unset !important;
    border-bottom: 2px solid #fff;
    margin-bottom: -4px;   
} 
}

[yoomzy]

Thanks a bunch, man. I really appreciate it! :))

[Dan-From-Ryviu]

Very welcome, @yoomzy