How can I create a full-width header in the Dawn theme?

[samsilva]

Hello Everyone!

I'm trying to have a full-width header for my upcoming store(using Shopify Dawn Theme) and really struggling to find the code for it. I only need the header to have the full width and keep the body as it is. Need the logo to be pushed to the far left and search, shopping cart, and profile icons to be moved to the far right(Please refer to the attached image).

Hope someone would help. Thanks so much in advance!

[KetanKumar · Accepted solution]

@samsilva 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

.header {max-width: 100%;}

[samsilva]

Legend! Thanks so much, mate! It worked! 

[arcticwave]

This didn't work for me.  Any other suggestions?  Here's my store: www.arcticwaveco.com

[labtoolhk]

It works. But how to stay navigation menu in the center?

[floweractually]

This works but the menu changes from one row to two rows when the desktop explorer window is not fully opened . Any suggestions on how to make it reactive ? 

[KetanKumar]

@floweractually 

oh sorry for that issue can you please send store url so i will check and let you know 

[floweractually]

https://q0y2lursev2dfhgb-24690163805.shopifypreview.com 

[Reg101]

Hello Ketankumar, 

I am right now working on the Dawn theme as well. 

I would like to have a header like this: https://www.lemela.co.uk/
Like full width and full height. 

Could you help me? 
Right now it looks like this

[Reg101]

I used this code: 
.banner__media {
height: 100vh !important;
width: 100vw !important;
object-fit: cover !important;
}

.banner--medium,
.banner--large,
.banner {
height: 100vh !important;
display: flex;
align-items: center;
}

[KetanKumar]

@Reg101 Sure, could you please share your store URL? I’ll review it and get back to you as soon as possible.

[Reg101]

https://4fjfi0-39.myshopify.com/