How to change thickness of header on mobile?

Hi there! I would like to change the thickness of my header (the green part) to something thinner for mobile version. This is what it looks like now on mobile:

Is there anyway to make it thinner? I am comfortable with editing code. Thank you!

The preview link is: https://b50vcq6bm9o4mjwh-55086776342.shopifypreview.com

Hi @williamk0601

This is Victor 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.min.css.

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

.header__heading {

margin: 0 !important;

}

.header__logo-image {

max-width: 80px !important;

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

@williamk0601

Try to reduce your logo file to fix your issue. To reduce the logo size, add this code before “” tag in Edit code > layouts > theme.liquid file


Hi there! Just reducing the logo isn’t enough for the mobile version. It’s still taking up quite a lot of space.

@williamk0601

You can try again with this code:

.header__icons {
margin-top: 0 !important;
margin-bottom: 0 !important;
}

Hope that my solution works for you.

Best regards,

Victor | PageFly