Website Banner Sticky Problem

Hello guys,

I would like my banner and to always display in computer&mobile and be sticky and that’s the case.

When I shrink the screen, the banner goes over my header as in the photo below:

vseazon_0-1711184044126.png

website link: https://b0a4dd-08.myshopify.com/

Can you help me make the banner and header co-exist on both PC and mobile?

Also if it’s possible for you to help me to have the header display only when scroll up ?

Thanks

Hi @vseazon

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 base.css

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

@media (max-width: 767px){

.shopify-section-group-header-group {

position: sticky !important;

}

.header-wrapper.color-scheme-ac16932a-6a83-45f6-9cd4-e45ccfb3d09e.gradient.header-wrapper–border-bottom {

top: 55% !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

I would like to reduce the size of the banner on mobile how to do it ?

Can you help me resolve this ?