Solved

Full-width header for Shopify Dawn theme

samsilva
Tourist
9 0 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

 

Accepted Solution (1)

KetanKumar
Shopify Partner
36837 3635 11966

This is an 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%;}

 

If helpful then please Like and Accept Solution.
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

Replies 7 (7)

KetanKumar
Shopify Partner
36837 3635 11966

This is an 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%;}

 

If helpful then please Like and Accept Solution.
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
Tourist
9 0 1

Legend! Thanks so much, mate! It worked! 

arcticwave
Tourist
8 0 1

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

 

labtoolhk
Visitor
1 0 0

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

floweractually
Excursionist
27 0 4

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

KetanKumar
Shopify Partner
36837 3635 11966

@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.
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