Why won't my header and announcement bar stick?

[Joev38]

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. 

 

[Zqdo]

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.

[Joev38]

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

 

[Zqdo]

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?

[BSS-Commerce]

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.

[Joev38]

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

[PageFly-Lucas]

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

[Joev38]

 

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

[PageFly-Lucas]

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.