How to expand the header

Store Design
, , ,

Topic summary

A Shopify store owner wants to extend their header to full screen width while maintaining the current position of menu items. The header currently appears centered with gaps on both sides, particularly noticeable on mobile, tablet, and Mac devices.

Solutions Provided:

Two community members offered CSS-based fixes:

  • DaisyVo’s approach: Add custom CSS through Shopify admin → Online store → Customize → Theme settings → Custom CSS:
header.header {
    margin-inline: 0 !important;
}
  • BSS-TekLabs’ approach: Insert CSS code in the theme.liquid file before the </head> tag (specific code snippet included in original post)

Resolution:

The issue was successfully resolved. The original poster confirmed one of the solutions worked and thanked the contributors. Both solutions included before/after screenshots demonstrating the header extending to full width.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, how can I make the header span the full width of the screen?

Right now, it’s kind of centered, but there’s a bit of space missing on both sides. I’d like to extend it fully while keeping all the menu items in the same position they’re currently in. Just extending the header itself.

Here’s my store URL: https://1049xn-ya.myshopify.com/

Thanks a lot!
Tim

1 Like
2

It didn’t work. It ended up like this:

CreatorTim_0-1735687496757.png
CreatorTim_0-1735687496757.png1920×450 83.5 KB

I want to keep everything as it was before but just extend the edges. On a computer, it might not be noticeable, but if you look at it on a mobile, tablet, or even on a Mac, you’ll see that the edges are cut off, and it’s bugging out.

So, I just want to extend it fully while keeping the menu items in their current positions.

Thank you so much!

Tim

3

Hi @CreatorTim ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

header.header {
    margin-inline: 0 !important;
}

Here is the result:

DaisyVo_0-1735692111669.png
DaisyVo_0-1735692111669.png1348×852 74.7 KB

Please let me know if it works!

Best,

Daisy

4
  • Here is the solution for you @CreatorTim
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it

This is the result you will get:

BSSTekLabs_0-1735706352452.png
BSSTekLabs_0-1735706352452.png376×809 126 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
5

Thank you so much! Appreciate it

1 Like
6

Glad to be of help. Have a nice day.