Why won't my header and announcement bar stick?

Store Design
,
1

Good evening guys. Any help with a header and the announcement bar that won’t stick by the customization option? Probably I didn’t something with the code hehe. Sorry for bothering. The site is mushcoffeelab.com in case you want to now.

IMG_2345.png
IMG_2345.png1170×2532 335 KB

2

Can you take a screenshot of your header customizer? Also, is there any option to make the header fixed to the top on mobile? Thanks.

3

Hi @Joev38
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 @Joev38

This is Lucas 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 screen and (max-width: 749px){

ticky-header.header-wrapper.color-background-1.gradient.header-wrapper–border-bottom {

position: fixed;

z-index: 1;

top: 5%;

}

.announcement-bar.color-background-2.gradient {

position: fixed;

width: 100%;

top: 0;

z-index: 1;

}}

Hope that my solution works for you.

Best regards,

Lucas| PageFly

5

Thanks for the reply! Seems it worked for the announcement bar, but the header remains behinds the announcement bar, kinda hided behind, here a pic

IMG_2356.png
IMG_2356.png1170×2532 305 KB

6

Good evening sir, I’ve tried all these 3 options for sticky header, none keeps it on place when scrolling

IMG_2359.png
IMG_2359.png1170×2532 226 KB

7

Thanks for replying, sure, the link is mushcoffeelab.com has no pass

8

On your customizer, click on Header, and then scroll to where it says “Add Custom CSS”. Paste this is:

.announcement-bar{
position: fixed;
width: 100vw;
}

.header{
position: fixed;
width: 100vw;
}

.section-header{
  position: relative;
  top: 35px;
}

This should make those elements stick to the top of the page. Does it work?

9

I have checked your problem Again and seems to be the header sticky now.
In case you need any help, don’t hesitate to let us know.
Thank you.