Re: Full-width header for Shopify Dawn theme

samsilva · ‎05-21-2022

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 · ‎05-22-2022

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

If helpful then please Like and Accept Solution. Partnership of your ☕️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

KetanKumar · ‎05-22-2022

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

If helpful then please Like and Accept Solution. Partnership of your ☕️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

samsilva · ‎05-22-2022

Legend! Thanks so much, mate! It worked!

arcticwave · ‎12-13-2022

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

labtoolhk · ‎03-26-2023

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

floweractually · ‎10-05-2023

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 · ‎10-05-2023

@floweractually

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

If helpful then please Like and Accept Solution. Partnership of your ☕️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

floweractually · ‎10-05-2023

https://q0y2lursev2dfhgb-24690163805.shopifypreview.com

Re: Full-width header for Shopify Dawn theme

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

Community Blog Articles