SheBossLife Posted June 8 Posted June 8 I'm trying to disable the announcement bar for a page where the header is also disabled. I added this code to the Advanced Settings --> Page Header Code Injection: <style> /* remove announcement bar */ .sqs-announcement-bar-custom-location { display: none !important; } </style> However, the announcement bar is still showing, I suspect because the header has been disabled for the page as well. Is there a different code snippet I can use to disable the announcement bar on this page? Thank you!
Lesum Posted June 8 Posted June 8 @SheBossLife Hi! You can use this code to hide the announcement bar on a specific page. Add the code under Website > Pages > Website Tools > Custom CSS. #collection-665a4f800f428445eb0a0317 .sqs-announcement-bar-dropzone { display: none !important; } You've to replace the collection-ID in the code with the collection-ID of your page. Each page has its own unique collection-ID. You can use this Chrome extension to find your page's collection-ID. Squarespace ID Finder If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee?
SheBossLife Posted June 25 Author Posted June 25 Thank you for this approach! This also isn't hiding the announcement bar... I do think the problem is related to hiding the header on the page. Here's a page where hiding the announcement bar this way works (header is included on the page): https://www.shebosslife.com/course Here's a page where hiding the announcement bar this way DOES NOT work (header is NOT included on the page): https://www.shebosslife.com/corporate-training
Lesum Posted June 25 Posted June 25 @SheBossLife Try this code: #collection-65ee1bd8dc8c6c69d9f25c78 .sqs-announcement-bar { display: none !important; } Daniel-92 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee?
AnnaB12 Posted August 7 Posted August 7 Hi there! I would love some help with some code to display the announcement bar only on nativewest.com/store and urls that follow that for example nativewest.com/store/seeds and etc. Thank you so much!
Lesum Posted August 8 Posted August 8 @AnnaB12 Hi! You can add this code in Website > Pages > Website Tools > Custom CSS to display the announcement bar only on store and store category pages. body:not(#collection-65ba6791690a2520703f8232) .sqs-announcement-bar-dropzone { display: none !important; } If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee?
tuanphan Posted August 10 Posted August 10 I think the code should be body:not(.collection-65ba6791690a2520703f8232) .sqs-announcement-bar-dropzone { display: none !important; } I think . will target both store + detail but # target store page only AnnaB12 and paul2009 2 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment