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]

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!