Search the Community

Site URL: https://www.omventure.com What CSS will make the sticky announcement bar (on mobile) allow the full navigation menu to appear? Meaning, right now the sticky announcement bar covers up most of the mobile navigation menu. Thank you!

Site URL: https://www.max20.com I want to have multiple buttons that are the same style as the rest of my buttons in my announcement bar. I think I would like them all to be different colours. Please can someone advise how I can achieve a look similar to my rubbish mock-up attached. I think preferably I'd like 3 buttons rather than two, with the ability to link to pages within the site, and to change the colour of all the buttons too. Thank you.

Hi, I added announcement bar with a blue background and mostly white text. I made a few of the words green (through custom CSS) for emphasis. The bar appears nicely on every page EXCEPT on mobile when I click on the burger box menu. On that page, there is no blue bar color and I can only see the words in green. Any ideas why the blue background disappears? It doesn't appear to be hidden behind anything, you can see the space it would occupy, just no blue behind it. Thank you! FYI, the custom CSS code I have for the green text is: .sqs-announcement-bar p strong { color: rgb(181,230,29) !important; }

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!

Site URL: https://www.kaiyosonics.com/ Any ideas on how to fix this issue of the announcement bar pushing the site logo down but not the first section along with it on mobile? There are only 4 pages that it happens on and they are the pages where I've had to duplicate the top section and hide one on mobile and one on desktop using CSS so I could make mobile only adjustments to the layout. In doing so, the duplicated section that is visible only on mobile seems to have gotten rid of the transparent section behind the header or something. I've noticed when trying to edit these sections I need to add a 50px top margin in CSS just so I can click the pencil icon, otherwise it is up in the header section and then 'edit header section' appears when moving the cursor towards it and I'm unable to click on the first section's pencil icon.

Site URL: https://solanashades.com/ I would like to have two "sections" in the announcement bar - one on the left and one on the right so I can advertise two separate items. Any ideas?

Site URL: https://www.taylorsdentalsc.com/ Hello! I am looking to have align one line of text within the announcement bar to the left, and the other line to the right (similar to the attached), so that the information can be a bit larger without making the bar taller. What would be the best way to achieve this? I have the bar hidden on mobile, since the information will be accessible via the mobile information bar. Pass to see site is taylors

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://www.cetaglobal.org/ Does anyone know how to code a 2nd announcement bar on a Squarespace website? I have been searching for custom CSS code to solve this problem and any suggestions would be appreciated.

Hi anyone knows how to create two different announcement bar for two language pages? Right now it seems I can only create 1 announcement bar .. Appreciate any help!

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!

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?