Search the Community

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://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://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: https://www.hampersfor.com.au It doesn't seem to matter what combination of codes i use or if I reduce the text size in the announcement bar through the mobile site styles - it reduces the global text size too. Is there a simple CSS code that can fix this issue - otherwise it looks odd in mobile view. LASTLY: is there a simple code to increase the logo size in mobile view, again, everything i try doesn't seem to work. (website is live)

Hey there, Wondering if anyone has a suggestion for how I can add a floating banner to a single page? Something similar to the announcement bar but I would just like to display it on a single page (my sales page). Thanks so much! Fran

Site URL: http://www.silverlakeyoga.com Here is the only Custom CSS for the site. div.healcode .header {position: static !important;pointer-events: all;} Any ideas why the Announcement Bar is not visible for any page on the site?

I'm testing out some code for a marquee banner. I like the look of the banner and the animation, however, it's not a continuous loop. See attached image. What I would like for it to do it just be continuous with no breaks. What have I missed? Here's my code: code block: <div class="marquee"> <div class="track"> <h3> NOW BOOKING&nbsp; &nbsp; &nbsp; &nbsp;·&nbsp; &nbsp; &nbsp; &nbsp; NOW BOOKING&nbsp; &nbsp; &nbsp; &nbsp;·&nbsp; &nbsp; &nbsp; NOW BOOKING&nbsp; &nbsp; &nbsp; ·&nbsp; &nbsp; &nbsp; &nbsp; NOW BOOKING&nbsp; &nbsp; &nbsp; &nbsp;·&nbsp; &nbsp; &nbsp; &nbsp; NOW BOOKING&nbsp; &nbsp; &nbsp; &nbsp;·&nbsp; &nbsp; &nbsp; &nbsp; NOW BOOKING&nbsp; &nbsp; &nbsp; &nbsp;·&nbsp;NOW BOOKING&nbsp; &nbsp; &nbsp; &nbsp;·&nbsp; &nbsp; &nbsp; &nbsp; NOW BOOKING&nbsp; &nbsp; &nbsp; &nbsp;·</h3> </div> </div> css block .marquee { position: absolute; display: flex; animation: moveLeft 40s linear infinite; } .track { font-size: 36px; min-width: 100%; text-align: center; padding:20px; line-height: .9em; color: #191c19; font-family: 'casanova'; border-width:1px; background-color: #b1c2f6; border-style:solid; border-radius:inherit; white-space: nowrap; min-width: 100%; text-align: center; } section[id="621b04d4ad51f07b6c2a5f3e"] { overflow-x: hidden !important; overflow-y:hidden; min-height:initial !important;.Index-page-content { padding-top:30px; padding-bottom:30px; } }@keyframes moveLeft { from { transform: translateX(0%) } to { transform: translateX(-100%) } }

Site URL: http://www.moonlitdesign.uk Hi there, when i open the mobile dropdown menu from anywhere other than the landing page of the site, it displays the wrong logo and hides the close icon. attached images for clarity. please help ,this is preventing me from launch! Thanks

Does anyone know how to make the announcement bar text scroll in marquee effect all on one line without any blank space after it ends? I want the text to endlessly repeat. See example here: https://www.atnndesign.com If anyone can drop some custom CSS for this design, that would make me very happy!

Site URL: https://www.milkglobal.net Morning/Evening guys, Has anyone managed to achieve a scrolling announcement bar that works on all devices. I've tried quite a few open source codes but nothing achieves a smooth transition from right to left. If anyone has any advice it would be hugely appreciated. Thanks Dan

Site URL: https://3emanagement.org/ My announcement bar pops up on mobile devices but not on desktop. I reached out to Squarespace support and they believe it is a CSS issue. I don't recall editing the code so I'm not sure if that's the issue. If you have experienced the same problem or know how to fix it I would really appreciate it! Thank you.

Hi, Fairly new to squarespace, I'm currently filling the SEO descriptions of my pages. Before doing so, the description shown in SERP were mostly content from the pages and "sometimes" started with the text from the announcement bar. Since I use announcement bar for special and seasonal offers, I find it relevant to see the text in some (all?) my page descriptions. Is there any way to do something like this : Description : "%a. And then my custom description." With "%a" being the current text of the announcement bar ?

Site URL: http://www.moonlitdesign.uk/home Hi there, Since adding in an announcement bar on my site, my mobile sticky navigation/menu bar has completely messed up and broken. It is showing lots of extra padding at the top than before when it shouldn't, even though nothing else has changed. It is also affecting the scroll ability on mobile, it's as if the landing page is getting stuck and I cannot scroll back up or down for a few seconds. Really need help! thank you!!! www.moonlitdesign.uk/home

Site URL: https://audreykester.com Hello, I'm wondering if it's possible to remove the announcement bar from mobile using CSS or another setting. As you can see in the screenshot, the announcement bar on mobile goes onto three lines which I really dislike. Any help is much appreciated 🙂 Site password is colby

Site URL: https://www.sanderswingo.com I activated the Announcement Bar and have tried several CSS code sample from the forum and I can't get it to work. Can someone take a look and let me know what i'm missing? I've tried to add it to just one page adding code to Custom CSS and to page header, adding space to the header.

Can someone share how to make the announcment bar animated? I would like it to flash. Thank you for your help. Bedford template https://crow-shark-d2c4.squarespace.com/config/ passcode -4646

Hi! I am new to the circle community but am in the middle of developing a food blog site for a client. I really like the announcement bar as a form of navigation on this site https://www.elisabethandbutter.com/. does anyone know how I can implement this on my site? Thanks so much!