How to expand the header

[CreatorTim]

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

[CreatorTim]

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

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

[DaisyVo]

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:

Please let me know if it works!

Best,

Daisy

[BSS-TekLabs · Accepted solution]

- 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 </head> and press 'Save' to save it

<style>
.header.header--middle-center {
    margin: 0 !important;
    padding-left: 4rem !important;
    padding-right: 4rem !important;
}
</style>

This is the result you will get:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[CreatorTim]

Thank you so much! Appreciate it

[BSS-TekLabs]

Glad to be of help. Have a nice day.