Jump to content

Keeping the Announcement Bar at the top when scrolling

Recommended Posts

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; }
}

 

Edited by Sparrow-Startup-Advisors
Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Link to comment

This demonstrates the rudimentary effect.

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.