Matthew26

Thank you!! @tuanphan Is it possible to have it side-by-side? Or only to the far-right. Let me know, thanks 😉

Hi @tuanphan! Is it possible to position this button inline next to the native button? to sit next to each other? You can see what ive done so far on this page on the 'Archaeology' tab: https://dog-ruby-8rl5.squarespace.com/programs Password= abc123

Hi! I am trying to achieve a smooth scrolling effect like the one of this site: https://www.whitedeersweden.com/ Notice its not just your basic smooth scroll, its got a little more control to it, and perhaps slower in a way. Could someone help? Thank you! My site is www.designbymatt.co if needed.

Hi @Beyondspace could you help me replicate this on my list carousel? Its the first carousel on my home page: www.aqrtraining.com under 'The AQR Experience'. Thank you!!

Spoke too soon! I managed with this code in the footer: <script> var url = window.location.href; var headerLogoLink = document.querySelector('.header-title-logo a'); if(url.indexOf("/put-page-here") !== -1){ headerLogoLink.setAttribute('href', "https://www.yoursitehere.com"); } else { headerLogoLink.setAttribute('href', "https://www.yoursitehere.com/home"); } </script>

Hi all, I know how to change the site logo link on my website, however, I wonder if it is possible to change this link on my member pages so that they don't leave the member area when clicking on the site logo? Any help with this would be great! Thank you!

Nevermind! Found it 🙂 .blog-alternating-side-by-side .blog-item

Hey @melody495 do you know the selector for the alternating side by side blog layout? I'd like to do this too but for a different layout. Thanks!

Hey! I will PM you with the test account details.

Hey! The site URL is www.aqrtraining.com/new-page-2 however this is a member area page. I can PM you a username and password to get in if needed. Please let me know! Thanks!

Hi! The folder items in my header navigation dropdown are hidden behind what seems to be the header itself. I've dug around the code to see if something is causing this- however It seems I am missing the problem. I've tried targeting the class of the folder and set the z-index higher but this does nothing. Can someone help me solve this issue? See the css for the header navigation styling below and a screenshot attached. In the screenshot you will notice only 2 of the dropdown items are visible, however, there should be more below. Unfortunately this is a member page, but id be happy to make it public for a bit to check the code? #collection-655b6a902ec88040d8291a36 .header-display-desktop { background: rgba(64, 64, 63, 0.3); border-radius: 100px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); padding-top: 1em; padding-bottom: 1em; padding-right: 3em; padding-left: 3em; max-width: 100%; z-index: 1; }

Hey @jaeveedee I really like what you've built in the demo. How did you manage to get the marquee up there? That would honestly be ideal with me. Let me know, and thanks for your help.

Hey @jaeveedee No worries. Here is my page: www.designbymatt.co -let me know if you spot it at the top.

Thanks for the info! I tried using the native announcement bar option based on that resource you shared. Ive created something similar to what I was going for. However I still need help with a few things. 1) I would like the text to continuously generate like that in a marquee block, so there is never empty space. How can I do this? 2) I would like for the announcement bar to only appear on the home page and not show on any other page. How can I restrict it to the home url only, avoiding sub pages?

🤦‍♂️ I see now. Forgot to remove the injected code like you suggested. Works like a charm now. Thanks again!

You can add this in CSS to round the corners of a specific content block: #insert_block_yui_here .sqs-block-content img { border-radius: 8px; } Adjust the corner radius as needed. Hope this helps!

Hi! I have added an announcement bar via my site header. I did this because I wasn't too sure how to adjust the Squarespace announcement to my liking. Anyhoo- You will see that the text scrolls, however it always needs to reset. I would instead like for the text to continuously loop like the marquee banners. Therefore there will always be text showing. Can someone with more advanced code knowledge help me achieve this? Below is the code I've used. <!--Announcement Bar--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Announcement Bar Example</title> </head> <body> <div class="announcement-bar"> <div class="static-text"> <div class="dot"></div> Now Designing </div> <div class="scrolling-text-container"> <div class="scrolling-text"> A Multi-Lingual Tutoring-Service Website </div> <div class="scrolling-text"> Aspire Tutoring </div> <div class="scrolling-text"> A Modern Home-Remodeling Website Redesign </div> <div class="scrolling-text"> Elite Residential Source LLC </div> <div class="scrolling-text"> An Elegant Logo-Kit for a Fine Dining Experience </div> <div class="scrolling-text"> Down to Earth Fine Dining </div> <div class="scrolling-text"> An Integrated Membership Platform Revamp </div> <div class="scrolling-text"> AQR Futbol Training </div> </div> </div> </div> </body> </html> <!-- The CSS for the Announcement Bar --> // Announcement Bar Font // .announcement-bar { font-family: 'ProductSans-Regular', sans-serif; } .static-text{ font-family: 'ProductSans-regular', sans-serif; } .scrolling-text { font-family: 'ProductSans-thin', sans-serif; } // Announcement Bar Text Colors // .announcement-bar .scrolling-text-container .scrolling-text:nth-child(odd) { color: #d9d9d9; } .announcement-bar .scrolling-text-container .scrolling-text:nth-child(even) { color: #a6a6a6; } // Spacing Between Announcement Bar Items// .scrolling-text:nth-child(1) { margin-right: 10px; } .scrolling-text:nth-child(3) { margin-right: 10px; } .scrolling-text:nth-child(5) { margin-right: 10px; } .scrolling-text:nth-child(7) { margin-right: 10px; } // Scrolling Announcement Bar // @keyframes gradientAnimation { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .announcement-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 10px; position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; overflow: hidden; background: linear-gradient(-45deg, #1b0a24, #490793); background-size: 200% 200%; animation: gradientAnimation 10s infinite alternate; } .static-text { color: white; display: flex; align-items: center; font-weight: bold; white-space: nowrap; padding-right: 10px; padding-top: 7px; padding-left: 10px; padding-bottom: 7px; position: relative; z-index: 2; background-color: #370a66; border-radius: 5px; } .dot { width: 8px; height: 8px; background-color: red; border-radius: 50%; margin-right: 5px; } .scrolling-text-container { display: flex; white-space: nowrap; animation: scroll 80s linear infinite; } .scrolling-text { white-space: nowrap; margin-right: 50px; z-index: 1; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-200%); } }

Hey @creedon Thanks for this. I see it mostly works, however the 'gap' does not work. I can see that the text then wraps and stacks on each other rather than extending to the right, if that makes sense. See the images for reference. Thanks!

@creedon Hi! Can you help me do this as well? I would like this on the form at the bottom of the homepage at www.shannonbruceramaka.com so that the radio options (6) are in two columns of 3. Thanks!

Thank you Joan! I played around with it and I think it looks great now. I appreciate your feedback and input.

Hi! (Q1) I currently have a language switching option at the top right of my website (English | Deutsch) and I would like to stylize it further. Right now it just floats at the top right of the page, but i would like to permanently fix this to the header to be inline with the shop icon. How can I do this? (Q2) I would also like to make it look nicer. For example a toggle button that just says EN and DE. See the attachment as an example. (Q3) How can I make this toggle or button optimized for mobile? For example can I have it floating on the bottom left corner in a sticky position, or add it to the hamburger menu? Can someone help me with this please? Maybe @tuanphan Thank you 🙂 Here is the Footer Script for the current setup: <script> /*setup language switcher*/ $('body').prepend('<div class="language"><a href="/en/home" class="lang-en">English</a> | <a href="/de/home/" class="lang-de">Deutsch</a></div>'); </script> Here is the CSS for the current setup: .language { color: #994469; position: absolute; top: 10px; right: 10px; z-index: 99999; a { color: #994469; &:hover { opacity: 0.8; } } }

Hi! Do you have a code that this could be used for? The site I would like to do this on is www.aspiretutoring.eu I would like users who's browser is in German to redirect to our german home page with the url slug /deutsch-home