Customize the layout of the mobile header only

[MelissaH21]

Hi,

I am trying to customize the layout of my mobile header only. I have the desktop version exactly how I want it. For the mobile, I got the various icons where I want, but the spacing between the various elements (logo, search, cart, and hamburger menu) are kind of weird. Does anyone know the code to fix this for mobile header view only to correct the margins. Mainly I need to shift my logo over so it’s completely visible and put some space between the cart and hamburger menu. I’d be okay with having the hamburger menu centered below everything too. Here is a picture of how it currently looks:

[PageFly-Richard]

Hi @MelissaH21

This is Richard 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 styles.css

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

@media screen and (max-width: 767px){

.header__heading-logo {

max-width: 50% !important;

}

a#cart-icon-bubble {

margin-right: 10px !important;

}}

Hope that my solution works for you.

Best regards,

Richard | PageFly

[MelissaH21]

Hi Richard,

That worked! Thank you! Pagefly help is the best.

[PageFly-Richard]

You are welcome @MelissaH21