Keeping the Announcement Bar at the top when scrolling

Site URL: https://www.sparrowtheapp.com/

@tuanphan @bangank36

You guys are my idols. As the title suggests, I want the announcement bar to stay as I scroll down on my phone / laptop. I have the following bit of CSS but can't seem to make it work. Thoughts?

#page section {
	min-height: 0 !Important;
	height: auto !important;
    padding-bottom: 0vw !important;
}

.sqs-announcement-bar-dropzone {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10001;
}
.show-on-scroll-wrapper.show {
    display: none;
}

/* remove announcement bar on mobile when mobile navigation is active */
@media only screen and (max-width: 640px)
{.tweak-mobile-overlay-slide-origin-left.is-mobile-overlay-active .sqs-announcement-bar{ display: none; }
}

Using position sticky only works if the parent element has sufficient height for the element you want to be stuck within to be stuck.

The announcement bar has virtually no vertical height so position sticky will not work for that case.

You will need to use position fixed to make it "stick" to the top of the screen. When you use fixed the height of the announcement bar will be taken out of the flow. You will want to compensate for the height of the announcement bar that has gone missing in the rest of your elements.

22 hours ago, creedon said:

Using position sticky only works if the parent element has sufficient height for the element you want to be stuck within to be stuck.

The announcement bar has virtually no vertical height so position sticky will not work for that case.

You will need to use position fixed to make it "stick" to the top of the screen. When you use fixed the height of the announcement bar will be taken out of the flow. You will want to compensate for the height of the announcement bar that has gone missing in the rest of your elements.

Hey, it didn't work. Same problem.

This demonstrates the rudimentary effect.

I don't have a solution for this effect at this time.

6 minutes ago, creedon said:

This demonstrates the rudimentary effect.

 

I don't have a solution for this effect at this time.

Appreciate your showing this. Just to clarify to the reader, I still do not have a solution as I'm not able to make my bar stick to the top even after copying the CSS shown in this video.

Still need help. Thanks chief! @creedon

Anyone? I'll keep posting till I get a response. This is urgent.

On 11/26/2021 at 12:35 PM, Sparrow-Startup-Advisors said:

Anyone? I'll keep posting till I get a response. This is urgent.

Don't remove any code in your current code. Add this to Design > Custom CSS

.sqs-announcement-bar-dropzone {
    position: fixed !important;
    left: 0;
    width: 100%;
    z-index: 9999;
}
.header-announcement-bar-wrapper {
    padding-top: 4vw !important;
}

On 11/27/2021 at 4:13 AM, tuanphan said:

Don't remove any code in your current code. Add this to Design > Custom CSS

.sqs-announcement-bar-dropzone {
    position: fixed !important;
    left: 0;
    width: 100%;
    z-index: 9999;
}
.header-announcement-bar-wrapper {
    padding-top: 4vw !important;
}

 

You are god, @tuanphan. @admin give this guy a promotion.