Search the Community

Does anyone have a way of changing the text and link in the announcement bar on a single page? Thanks!

The announcement bar I added to my site will not display on the homepage - I'm guessing because I have used CSS to hide the header on the homepage? Any help with keeping the header hidden but displaying the announcement is appreciated! Site link: thesprouthouse.net

Site URL: https://fairlane-hotel.squarespace.com/config/ I've enabled the announcement bar, but I cannot see the bar anywhere, on any page. Is it hidden behind our nav menu? I found an old article about this but couldn't find the code that was mentioned in that post's answer. This is also happening on our other websites.

Site URL: https://www.mattportch.com Hi, How do I change the size/font size of this announcement bar? I think I already have this in my CSS but Squarespace must have made an update that's caused it to go smaller.

Hi all, I've enabled the announcement bar on my 7.0 website, but as I do the format has changed from what it used to look like to be a much larger font size, a different font to what's used in the style sheet, centralised and only black font. I've tried to change this on the style settings but it isn't responding. Has anyone else also had this problem in 7.0 sites and if so, have you found any CSS to force it to change? Many thanks, Tom

Site URL: https://pumpkin-lime-8bna.squarespace.com/ Hello I've got some scrolling text as an announcement bar in this site https://pumpkin-lime-8bna.squarespace.com/ pw AWC123 It's currently got a huge blank gap between scrolls, I'd love for it to be on a continuous loop rather than having a gap between loops. Is anyone able to help? This is the code I've used to get it to this so far below. Thanks in advance. .sqs-announcement-bar-dropzone { position: -webkit-sticky!important; position: sticky!important; top: 0!important; z-index: 9999!important; } .show-on-scroll-wrapper.show { display: none!important; } /* Removing the underline on link in the announcement bar */ .sqs-announcement-bar-text a{ text-decoration: unset !important; } /* Adding left and right padding, change to match your site padding if needed */ .sqs-announcement-bar-text{ padding-left: 40px; padding-right: 40px; } /* Hiding anything that extends beyond the screen */ #announcement-bar-text-inner-id { margin: 0 auto; overflow: hidden; } /* Starting the text off of the screen and adjusting width, change the animation: 15s to however long you want the marquee to take in seconds */ #announcement-bar-text-inner-id p { display: inline-block; width: max-content; padding-left:100%; will-change: transform; animation: marquee 25s linear infinite; } /* Stopping the marquee on hover so people can click on links */ #announcement-bar-text-inner-id p:hover { animation-play-state: paused } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

Site URL: https://toledomosquito.squarespace.com/ Site: https://toledomosquito.squarespace.com/ P/W: toledomosquito

Site URL: https://masterstocks.org I recently added an announcement bar to my site. I then used CSS to change the size of the bar, and the font. But after doing this, the header is now too tall. How can I shrink the header size, so there isn't so much space between the announcement bar, and the logo/site navigation links?

I am hoping to figure out how the reduce the overall height/size of the announcement bar on the Harris Template. It is really large at default settings but I can't figure out the code to get it to reduce properly. Any help would be much appreciated.

Site URL: https://raffael-fasel.squarespace.com/ Hi, I would like to use the announcement bar feature on my website and have written and enabled an announcement. While it is displayed in Firefox and on my mobile phone, it does not show in the Safari browser. Is there anything I can do to fix this? I have some custom CSS code but even when I remove it the bar still does not show. Thanks for your help!

Hi All! BIG QUESTION! I have added custom code to have an image in the announcement bar. And it looks great on desktop. However, in mobile view the announcement bar needs to be larger in height and the image needs to be bigger. What to do? Here is the css code I am using for the announcement bar currently: .sqs-announcement-bar:before { content:""; background-image: url(https://static1.squarespace.com/static/626182fac67c5563ad2be7aa/t/62dab342baafeb4a6b3e14ba/1658499906283/noun-under-construction-4891363.png); background-repeat: no-repeat; background-size: contain; float: right; margin-left: 150vw; width: 50vw; height: 2.5vw; } .sqs-announcement-bar-text {margin-right: 2vw; height: 2.5vw} .sqs-announcement-bar {background: linear-gradient(to right, #ffcc00, #ffff00, #ffcc00)!important} What do I do to increase the height of the announcement bar and increase the size of the image in mobile view?

Site URL: https://www.eightmonroe.squarespace.com Hi Community! I need some assistance and any help would be great. I'm currently building a website for prospective clients to illustrate different layouts "templates" for websites to choose from (ie Lead Capture Pages in x4 different layouts such as split layout, large hero image, one with a big form, etc.). These Lead Capture pages shouldn't have the main navigation menu. There will be only one page as a "single-scrolling website" example that will require the full navigation menu. So, in order to better illustrate how the websites will actually look I thought it would just be easier to link all of the pages into the Announcement Bar and hide the main navigation menu on the pages I need to. I've tried the code, which works great to hide both the Nav and Announcement Bar... //*Hide Navigation on Split Layout Page*// #collection-628f2844d267862301ebbf62 #header { display: none } But I'd only like to hide the Nav. Any code out there that will make this happen? Or any other suggestions? Website: https://eightmonroe.squarespace.com/ P*ssword: HelpMe!

Site URL: https://www.speakingoftheweather.com/ Hey there, Looking for a correct code to customize my Announcement Bar font. Here is the code I tried to inject... .sqs-announcement-bar-url { font-family : Courier New; font-size : 10 px; } Thanks!

Site URL: http://www.centraliaarts.org Is it possible to have multiple messages in the announcement bar?

Site URL: https://mandarin-synthesizer-j5g7.squarespace.com/ Hello, I would like to add a slideshow effect to the announcement bar. For example one frame would say 'call us on xxxxxxx' and then the next frame would say 'or email us at xxxxx'. Is this possible? and if so how would I find the css code for it? Many thanks for your help. Kelly

Site URL: https://pear-tortoise-x4bh.squarespace.com/ Password BHC2022 Hi, I have put the companies phone numbers in a permanent announcement bar at the top of the site. I would like them to stay aligned left in-line with the site header logo and site content. Even when viewing on different screen sizes I'd like it to stay aligned. Is this possible and how would I achieve it? Thanks, Nick

How do I make the announcement bar visible on only one page?

Site URL: https://dekanstudios.com/home Hi there Could you please help me with custom css to move my announcement bar to the bottom on the screen? Thanks in advance.

Site URL: http://dentalcareseattle.com Upon first page load on mobile of my site, the announcement bar is always halfway cropped off - but I can pull the page down and scroll and it reveals that its actually just hiding under the navigation. Upon later refreshes it is in the correct spot... strange. Any way to fix this so that the bar is fully visible when first landing on the site? This issue is on mobile only. Thanks!

Site URL: https://www.julianafarrell.com/ The announcement bar on this website bumps the header image down on mobile. Is there a way that I can make that not happen via coding? You can see the intended placement when you close the announcement bar, but the point is we want it to be open. Thanks in advance!

Site URL: https://www.parishsummer.org We have our site set to transparent menu, when people close out of the announcement bar this code appears. We have custom css but not much, can someone help in figuring out why this code appears?

Site URL: https://www.andykerrphotography.com Does anyone know how to display a different announcement bar message on a single page, so that it's a different message than the one at the top of all other pages please? Many thanks in advance.

I believe the squarespace standard announcement bar (at the top) is pushing my content down leading to "CLS" (Cumulative Layout Shift) issues being flagged in Search Console. Does anyone know if it is possible to hardcode an announcement bar so that it appears at the top of the page from the exact point the page loads thereby stopping the page from moving like this?

Hi Squarespace community, Is there a custom css code whereby it is possible to move the announcement bar which is normally located at the top of the screen to just underneath the navigation bar? (Navigation bar at the top of the screen > followed by announcement bar > main content) Thank you for any help provided.

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home Hello, I have added the announcement bar to the top of my site. Is it possible to add top and bottom padding on the bar to make it 'thicker'? Site page here - https://bluebird-porcupine-yzdg.squarespace.com/home Pword - bluebird Many thanks!