Make The Header Not Occupy The Entire Top Part

[martujv]

I would like to make my header not take up the entire width of the screen and not be completely stuck to the top of the screen. I attach a reference photo so that it is better understood.

Ideal header (reference):

- On computer:

- On mobile: 

This is how my header looks now (the red lines are to see the limits of the header):

- On computer:

- On mobile:

And this is how I would like it to look(the arrows are just to show the icons placement):

- On computer:

- On mobile:

(It would be important for the new header to be centered and symmetrical)

My header is modified to have a blurry effect on the background, so I would like it to stay the same.

My current theme is Stiletto, my website is https://winnerofficial.com and my password is y21

[PageFly-Henry · Accepted solution]

Hi @martujv 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file -> Save

div#shopify-section-sections--21113060262227__header {

    display: flex !important;

    justify-content: center;

    top: 2% !important;

}

header {

    width: 80% !important;

}

.header__inner {

    padding: 0 40px !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[martujv]

It worked perfectly! Thank you!