Make The Header Not Occupy The Entire Top Part

Solved

Make The Header Not Occupy The Entire Top Part

martujv
Pathfinder
105 2 26

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:Captura de pantalla 2024-03-16 a las 12.13.17.png

 

- On mobile: 

IMG_4640.jpg

 

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

 

- On computer:

2F55342A-59CC-461D-9A86-0277D3A773EE.JPEG

 

- On mobile:

965FDA57-38F9-420D-8E40-E474BC3A05C0.JPEG

 

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

 

- On computer:

E6F9C743-C301-40B4-9E3D-AF8853756C06.JPEG

 

- On mobile:

46A58947-3D5B-49CD-8B33-A21A3180FFB4.JPEG

(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

Accepted Solution (1)

PageFly-Henry
Shopify Partner
1184 335 283

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 2 (2)

PageFly-Henry
Shopify Partner
1184 335 283

This is an 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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

martujv
Pathfinder
105 2 26

It worked perfectly! Thank you!