Solved

How can I rearrange the header in Dawn 11.0.0 theme?

yoomzy
Shopify Partner
13 0 3

IMG_6479.jpeg

IMG_6481.jpeg

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

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7921 1540 1569

This is an accepted solution.

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;
}
}

Screenshot_5.jpg

 

- Does this help? Like and Accept solution to let me know
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 5 (5)

Dan-From-Ryviu
Shopify Partner
7921 1540 1569

This is an accepted solution.

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;
}
}

Screenshot_5.jpg

 

- Does this help? Like and Accept solution to let me know
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

yoomzy
Shopify Partner
13 0 3

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

Dan-From-Ryviu
Shopify Partner
7921 1540 1569

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;   
} 
}

Screenshot_7.jpg

 

 

 

- Does this help? Like and Accept solution to let me know
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.

yoomzy
Shopify Partner
13 0 3

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

Dan-From-Ryviu
Shopify Partner
7921 1540 1569

Very welcome, @yoomzy 

- Does this help? Like and Accept solution to let me know
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Enjoy 1 month of Shopify for $1. Sign up now.