Sparrow-Startup-Advisors Posted November 24, 2021 Share Posted November 24, 2021 (edited) 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 November 24, 2021 by Sparrow-Startup-Advisors Link to comment
creedon Posted November 24, 2021 Share Posted November 24, 2021 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 best , and see my profile. Thanks for your support! Link to comment
Sparrow-Startup-Advisors Posted November 25, 2021 Author Share Posted November 25, 2021 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
creedon Posted November 25, 2021 Share Posted November 25, 2021 (edited) This demonstrates the rudimentary effect. announcement bar fixed.mp4 I don't have a solution for this effect at this time. Edited November 25, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to comment
Sparrow-Startup-Advisors Posted November 25, 2021 Author Share Posted November 25, 2021 6 minutes ago, creedon said: This demonstrates the rudimentary effect. announcement bar fixed.mp4 222.67 kB · 0 downloads 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
Sparrow-Startup-Advisors Posted November 26, 2021 Author Share Posted November 26, 2021 Anyone? I'll keep posting till I get a response. This is urgent. Link to comment
tuanphan Posted November 27, 2021 Share Posted November 27, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Sparrow-Startup-Advisors Posted December 1, 2021 Author Share Posted December 1, 2021 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. Tiffc-MG 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment