How can I add transparent padding to my header?

Store Design
,
1

Hi, Does anyone know of a way i can add some transparent (so it shows the page background colour not header colour) padding around the top and sides of my header please?

Thank you.

*screenshot

Screenshot 2023-02-06 at 16.39.02.png
Screenshot 2023-02-06 at 16.39.02.png3350×1720 724 KB

2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Hi @LittlePaddocks

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

4

Hi, It’s littlepaddocksflowers.com - Password : lpf123.

Thanks

5

Hi, It’s littlepaddocksflowers.com - Password : lpf123.

Thank you

6

Hi @LittlePaddocks ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

@media screen and (min-width: 990px) {
   .header-wrapper {
        margin-top: 10px;
        max-width: calc(100% - 80px);
        margin-left: auto;
        margin-right: auto;
    }
}

I hope it would help you
Best regards,

Kate | PageFly

7

Hi @PageFly-Kate , that works brilliantly for desktop and is exactly what i’m looking for, thank you! Although it doesn’t seem to apply to mobile view. Is there a way of applying it to both?

Thanks :slightly_smiling_face:

8

Hi @LittlePaddocks ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

@media screen and (max-width: 989px) {
   .header-wrapper {
        margin-top: 10px;
        max-width: calc(100% - 40px);
        margin-left: auto;
        margin-right: auto;
    }
}

I hope it would help you
Best regards,

Kate | PageFly

9

Hi @PageFly-Kate , that worked perfectly.

Thank you for your help!

10

Great! I’m glad that I can help :blush: