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

Store Design
1

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!

header.jpg
header.jpg1920×380 36.5 KB

2

@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%;}
3

Legend! Thanks so much, mate! It worked!

4

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

5

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

6

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 ?

螢幕截圖 2023-10-05 下午11.26.12.png
螢幕截圖 2023-10-05 下午11.26.12.png3000×1730 1.06 MB

7

@floweractually

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

8

https://q0y2lursev2dfhgb-24690163805.shopifypreview.com

9

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_0-1747032194924.png
Reg101_0-1747032194924.png2441×1113 240 KB

10

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

11

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

12

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