Search the Community

Site URL: https://www.andrewmacarthy.com/social-media-guide Hi all, I would like to enable the announcement bar on a single page of the Five template (hidden elsewhere on the site). The page in question is https://www.andrewmacarthy.com/social-media-guide I have tried the advice given at the below link, but it doesn't seem to have worked for me. The first lines of code successfully hides the announcement bar on all pages, but the second doesn't make it appear on the individual page in question. Any help much appreciated! 🙂 Thanks.

Site URL: https://www.meetra-germany.com/ Hi, I would like to create a pop-up or announcement that will only be displayed to visitors who landed on my site because of a redirect and originally clicked on another URL that redirects to my website. Squarespace popups do not allow this option. Do you have any suggestions for a smart workaround or a good widget tool that takes into account the visitor's source? This is part of a rebranding so there will be a whole sitemap with the original URLs that will redirect to the new domain. Thanks in advance, Jana

Site URL: https://www.arrrrrrrt.com/ Help, I deleted a line of code now many of my CSS features refuse to function and I cannot find that pesky missing '{' Site password: 1445 My code is as follows: // Read More // .sqs-block-summary-v2 .summary-read-more-link { font-size:0; } .sqs-block-summary-v2 .summary-read-more-link:before { content: "Read More"; font-size: 12px; font-weight: bold; text-decoration: underline; color: #000000 !important; } // Summary Block Excerpt // .summary-excerpt p { font-size: 12px !important; font-weight: 500px; color: #000000; letter-spacing: 1px; line-height: 1px; } // Active Nav Color // // Hover Nav Color // .summary-thumbnail-outer-container:hover + .summary-content * { color: #FF0000 !important; } // Change Color On Hover Header Button // .header-actions .btn { transition: all 0.3s !important; } .header-actions .btn:hover { color: #ffffff; background-color: #FF0000; opacity: 1 !important; } /* Nav item color */ .header-nav-item a { color: #000000 !important; transition-duration: 0.4s; } /* Nav item hover color */ .header-nav-item a:hover { color: #FF0000 !important; transition-duration: 0.4s; } /* Nav item active color */ .header-nav-item--active a { color: #00b140 !important; } // Search // // Underline Search Block // .sqs-search-ui-button-wrapper.color-dark .search-input { background-color: transparent; border-width: 0; opacity: 1; border-bottom: 2.5px solid #00b140 ; } // Search Block - Text // .sqs-search-ui-button-wrapper.color-dark .search-input { font-size: 16px; font-weight: 500; letter-spacing: 0.03em; color: #00b140 !important; opacity: 1 !important; } // search // input[placeholder="Search"] { font-family: neue-haas-grotesk-text; font-size: 8px; } // Shopping bag // .icon--cart { svg { display:none; } background-image: url(https://static1.squarespace.com/static/603e72cb6bb5d15ac03c5f8c/t/60a46518a61eac7108716c02/1621386520681/bag+%282%29.png); background-size: 20px 20px; background-repeat: no-repeat; } // Subscribe // // Change Color On Hover Header Button // .header-actions .btn { transition: all 0.3s !important; } .header-actions .btn:hover { color: #ffffff; background-color: #4FBF87; opacity: 1 !important; } // Header Alignment // .header--menu-open .header-menu-nav-item {text-align:left;} .header--menu-open .header-menu-nav-folder-content {justify-content:normal} .header-menu-nav-item a { font-size: 20px; } .header--menu-open .header-menu-nav-item {margin-bottom: -0.5 px} // Hover blog // p a:hover { color:#808080 !important } // Hover filter images // .intrinsic:hover img {filter:grayscale(1)} // Underline // hr { padding: 0.5px 0 0.5px 0; } // Solid Underline Newsletter Form // // Pagination // section.item-pagination.item-pagination--prev-next { display: none; } // Back to top // #myBtn { width: 50px; height: 50px; display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; font-size: 25px !important; color: white; cursor: pointer; padding: 10px 10px 10px 11px; border-radius: 50%; box-shadow: 0px 0px 0px #000; /* Change the hex code in the next line to change background color */ background-color: #a4a4a4; } #myBtn:hover { background-color: #aeaeae; } // Learn // #block-yui_3_17_2_1_1621480503627_5947 p { line-height: 18px; } // H1 // h1 { margin-top: -15px !important; margin-top: -15px !important; } h4{ margin-top: 20px !important; margin-bottom: -16px !important; } // Spacing // .sqs-block h3 { margin-bottom: 0; } // Newsletter // #collection-60a504fa4444ce2a8b1de637 #header { display: none } // Summary // .sqs-block-summary-v2 { .summary-title, .summary-heading { font-family: neue-haas-grotesk-text; font-weight: 600; font-size: 28.43px !important; color: #000000; text-transform: ; font-style: ; } } .sqs-block-summary-v2 { .summary-excerpt p {font-family: ; font-weight: 500; letter-spacing: 0.1px !important; font-size: 16px !important; color: #000000; ; } } // paragraph spacing // div#block-yui_3_17_2_1_1621864997776_5317 p { margin-top: -18px; } //Gallery captions // p.gallery-caption-content { font-family: neue-haas-grotesk-text; font-weight: 400!important; text-align: left; } // Scale Up Grid Gallery - Simple Layout // .gallery-grid-item img { transform: scale(1) !important; transition: all ease-in-out 0.8s !important; } .gallery-grid-item:hover img { transform: scale(1.1) !important; transition: all ease-in-out 0.8s !important; } //Gallery// .gallery-grid.gallery-grid--layout-grid { padding-top: 25px !important; } /* search */ @media only screen and (min-width:640px) { .icon--fill:nth-of-type(1) { svg { display:none; } background-image: url(https://static1.squarespace.com/static/603e72cb6bb5d15ac03c5f8c/t/60ad0ac1c6ec20276425f57c/1621953217175/magnifying-glass.png); background-size: 100%; background-repeat: no-repeat; } } .header-menu-actions-action:nth-of-type(1) { svg { display:none; } background-image: url(); background-size: 100%; background-repeat: no-repeat; } // Headings // h4 { color: #FF0000 !important; } // Learning // #block-yui_3_17_2_1_1621954106683_7291 * { margin-top:- 20px; } //Remove Link Underline // h1,h2,h3,nav { a,span background-image: none!important; text-decoration: none!important; } } // Summary title // /* Title */ .summary-title-link { line-height: 1px !important; text-transform: none; font-family: neue-haas-grotesk-display; font-size: 16px; } /* category */ .summary-metadata-item a { font-family: neue-haas-grotesk-text; font-weight: 600px; } // Search box // .search-input:focus { outline-color: transparent; } // newsletter .. @media screen and (max-width:640px) { section#newsletter-copy h2 { font-size: 30px; } section#newsletter-copy .newsletter-form-header-description * { font-size: 17px !important; } section#newsletter-copy .newsletter-form-header { width: 100%; } } // form // .form-block input, .field-element{ color: #000; } /* Line under header */ header#header { border-bottom: 0px solid #000000; } //cookie// .sqs-cookie-banner-v2.LIGHT { background-color: #39FF14; .sqs-cookie-banner-v2-text p { color: #000000; } } button.sqs-cookie-banner-v2-accept { color: BLACK !important; border-color: BLACK !important; } .sqs-cookie-banner-v2-text p { font-size: 10px; font-weight: bold; font-family: neue-haas-grotesk-text; color: black !important;line-height: 130%; } // Mobile header // @media only screen and (max-width: 640px) { .banner-thumbnail-wrapper { padding: 2px 0 5px !important; } } //Button width // .sqs-block-button-element {width: 220px } /* Add this code to Design -> Custom CSS */ .sqs-block-button a, [class*='button'], [class*='btn'] { font-family: 'neue-haas-grotesk-text' !important; font-size:16px; letter-spacing: 0.03em; } div.meta-below-title * { font-size: 30px; } // Metadata // .summary-metadata-item { font-size: 10px; font-weight: bold; font-family: neue-haas-grotesk-display; font-size: 12px !important; line-height: -1px; } //Remove Link Underline // h1,h2,h3,h4,p,nav { a,span { background-image: none!important; text-decoration: none!important; } } // Announcement Bar Hover Color // .sqs-announcement-bar { width: 100%; background-color: #000000 !important; /* main color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .sqs-announcement-bar:hover { border-color: white !important; background-color: #ff0000 !important; /* hover color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } // mobile menu // .header-menu-nav-item a { padding: 0; font-size: 1em; } // marquee // /* 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: 30px; padding-right: 30px; } /* 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 17s 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); } } // hide metadata // .blog-meta-item--tags { display: none; } // hide footer newsletter // #collection-60a504fa4444ce2a8b1de637 { footer { display: none !important; } } /* Remove Read More Underline */ .blog-more-link::after { display:none; } // heading color /

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!

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.

Is there a way I can make the announcement bar show up on desktop as well as mobile? Thanks in advance.

Site URL: https://vanilla-collie-xre6.squarespace.com/ PW: 123456 Hi there! So, I've positioned the Announcement Bar where I want it on desktop, but every time the screen size changes it gets all messed up. Is there a way I can force the position to the top of the dark gray section so it will always be there? I super appreciate the help!

Site URL: http://www.myprintableposter.com Hello, I need help with my announcement bar. I don't want the bar full width. I like it in the same width like the rest of the website. Is there any code you could offer me, please? Many thanks, Marco

Site URL: https://keyboard-jaguar-k52z.squarespace.com/ Hello everyone, I'd like to make the announcement bar that is at the top of this website seamless, so that the same sentence repeats over and over without any blank space in between. Something like this: https://forthcoming.studio/ This is the website I'm working on: https://keyboard-jaguar-k52z.squarespace.com/ Password: tpt-2021 Any ideas on how to work it out? 🙂 Thanks in advance for your help!

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://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!

Site URL: http://www.livingstreams.org I'm trying to add an announcement bar/pop-up for our church's site. We want it to specifically un-hide on every Sunday at 8am to about 1pm and then go back to hiding. Is there any way to do this? Custom code? CSS? Can someone help me? thanks!

Site URL: https://cranberry-kale-kent.squarespace.com Hello! I am trying to customize my announcement bar but none of the codes work. I have attached the current code I am trying to use, which is not working. I have tried to change the color and not do animation, and change it to an image, but nothing with the .sqs-announcement-bar code is working at all. I tried to go under site styles and make it transparent and get rid of the original color, but that didn't work either. Help! Website password: thefontparty .sqs-announcement-bar { background: linear-gradient(99deg, #ff6460, #ebeecf); background-size: 400% 400%; -webkit-animation: AnimationName 6s ease infinite; -moz-animation: AnimationName 6s ease infinite; animation: AnimationName 6s ease infinite; @-webkit-keyframes AnimationName { 0%{background-position:0% 51%} 50%{background-position:100% 50%} 100%{background-position:0% 51%} } @-moz-keyframes AnimationName { 0%{background-position:0% 51%} 50%{background-position:100% 50%} 100%{background-position:0% 51%} } @keyframes AnimationName { 0%{background-position:0% 51%} 50%{background-position:100% 50%} 100%{background-position:0% 51%} } @-webkit-keyframes AnimationName { 0%{background-position:0% 49%} 50%{background-position:100% 52%} 100%{background-position:0% 49%} } @-moz-keyframes AnimationName { 0%{background-position:0% 49%} 50%{background-position:100% 52%} 100%{background-position:0% 49%} } @keyframes AnimationName { 0%{background-position:0% 49%} 50%{background-position:100% 52%} 100%{background-position:0% 49%} }}

Site URL: https://www.asiamathisart.com/ The background image of the first section on the home page is actually hidden behind the announcement bar and the menu. Is there any way to get the background image to begin below those two elements, so that the top of the background image starts immediately below the menu? (The text content is fine; it's just the background image. And it's not cropped - it's definitely behind).

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?

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?

Site URL: https://bidie.co Hey! I just added custom css to fix the header while scrolling. The announcement bar is now hidden on desktop - seems to be fine for mobile. Please can you help? Thank you in advance!

I added in some custom coding: .sqs-announcement-bar:before { content:""; background-image: url(https://static1.squarespace.com/static/5f2364303585643acdb40436/t/5fb2c91df7db0b10ea3baddc/1605552413449/Courage+Matters+App+Icon.png); background-repeat: no-repeat; background-size: 40px; float: left; width: 40px; height: 40px; } However with this, I can't seem to get the image that I added to float centered and be on the same line as the text as opposed to pushed to the corner. I've included a screenshot for reference. Anyone have any tips?

Site URL: https://www.znthtriclub.com Hi there, I'm desperately trying to add some form of "wrapper/banner/bar" on both the very top and very bottom of my website. I've currently managed to do so by hacking (in a rather bad way!) the announcement bar and footer modules. You can see this on the website and I've attached the image I'd like to use for reference. The issue I have is twofold: 1) The top banner isn't the same as the bottom 2) When scaled down to mobile, it looks terrible and there's a hideous black line beneath the top banner. Any help in coding something less clunky would be greatly appreciated. Thanks in advance. Cheers, Ben

Site URL: https://www.cocklesandheart.co.uk I am about to launch a limited edition product and want to allow people to sign up to mailing list to receive news on it when launched by clicking on a list in the announcement bar at the top fo the home page. I can't find out how to do this, is it possible? Thanks in advance.

Site URL: https://www.cloudshots.nl/ Hello everyone, I would like the colors on my shopping cart page to be the same as on my store and product page. I have added two screenshots as an example. The logo, menu text and announcement bar should be black for example. Can anyone help? Best, Herman Vulkers

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/home Hello, I have an announcement bar at the top of my site. Is it possible to increase the small cross to close it down? It currently looks really small. https://bluebird-porcupine-yzdg.squarespace.com/home Many thanks!

Site URL: https://www.emptymynest.com/ Hi, I added this custom code to change the color of the announcement bar but the text does not show up. Thoughts on bringing text forward? Thanks. .sqs-announcement-bar-url { background-color: #2C86C5; } .sqs-announcement-bar-text p, .sqs-announcement-bar-text a { color: #ffffff; }

Anyone else have trouble with the announcement bar in Squarespace 7.0? The text color will not change in the Site Styles.

Site URL: https://helicon-banjo-kjhj.squarespace.com/ pw: southernbeauty Hi there, trying to make my text change color on hover (or before hover) and can't get it to work. .sqs-announcement-bar { width: 100%; background: #FEE196 !important; color: invert !important; /* main color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .sqs-announcement-bar:hover { color: #ffffff !important; border-color: white !important; background-color: hsl(68, 10%, 57%) !important; /* hover color */ webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } for some reason neither the "color: invert" nor "color: #ffffff" are changing it. I appreciate any help!