nickstein

This might be of use to some of you: https://studiomesa.co/sm-auto-variables

To change the zoom state of the Squarespace map block, you can edit the map block, then drag the block settings dialogue box out of the way (don't close it) and use your laptop trackpad to zoom in or out. Save the page and it should adjust the zoom state.

definitely interested 🙂

Site URL: https://florianbrooks.squarespace.com Site: https://florianbrooks.squarespace.com Password: florian Hey, I'm trying to wrap a single letter on a button in a span so I can target it with CSS for a hover effect. Any ideas how I can achieve this? I have recreated a SQSP button inside a code block to show how this would look but, 'm guessing this work around would mess with the client's button conversion analytics and it's going to be impossible for me to use this workaround for other block buttons such as the form buttons etc. Any help would be AMAZING! TIA Nick Here is what I've done for the work around Code block html: <!--FAKE BUTTON COPY IN CODE BLOCK --> <div class="sqs-block button-block sqs-block-button" data-block-type="53" id="block-yui_3_17_2_1_1643232400177_2264"><div class="sqs-block-content" id="yui_3_17_2_1_1643720042987_387"> <div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="medium" data-button-type="primary" id="yui_3_17_2_1_1643720042987_386"> <a href="" class="sqs-block-button-element--medium sqs-button-element--primary sqs-block-button-element" data-initialized="true"> Bo<span class="btn-o-float">o</span>k Now </a> </div> </div></div> And the CSS so far: /* === FAKE BUTTON HOVER EFFECT === */ .sqs-block-button-element:hover .btn-o-float { color: red; position: relative; font-size: smaller; top: -3px; margin: 0.09em; }

@bangank36 - Thanks for replying. What I'm looking for is a solution that does not require the anchor link (#scroll). I'd like the button to scroll to whatever the following section is, even if I move the section order around. I tried the smooth scrolling code but that messed with the back to top function so I removed it again.

Site URL: https://florianbrooks.squarespace.com Hi folks, I'm looking for a way to make a button/scroll indicator/link scroll to the next section on a 7.1 site. I'm not looking for an anchor link solution as such. I'm hoping there is a specific code (probably javascript) which will make the button scroll to the next section, regardless which section is there. That way, if I change the order of sections, there is no need to update the anchor links, it simply scrols to whatever section is next. The site I'm working on is florianbrooks.squarespace.com pw: florian Thanks in advance Nick

Hey @rwp & @tuanphan, Thanks for all the help so far! I'm trying to combine your codes so the .scroll-down indicator becomes clickable and smooth scrolls to the next section but it does not seem to be working. I'm working on this site: florianbrooks.squarespace.com PW: florian I've added the HTML to a code block, the CSS to custom DESIGN > CUSTOM CSS and the JS to page header code injection. I also tried amending the JS code from this: $('.scroll-down').click(function() { $('html, body').animate({ scrollTop: $('section').next().offset().top }, 1000); }); to this: <script> $('.scroll-down').click(function() { $('html, body').animate({ scrollTop: $('page-section').next().offset().top }, 1000); }); </script> Here is all the code I am using for this so far: CSS: /* === SCROLL BUTTON ================ */ .scroll-down::before { content: 'SCROLL'; position: absolute; transform: rotate(-45deg); top: -70%; left: -165%; } .scroll-down { position: absolute; left: 50%; bottom: 10px; display: block; text-align: center; font-size: 20px; z-index: 100; text-decoration: none; text-shadow: 0; width: 25px; height: 25px; border-bottom: 3px solid #D2B87A; border-right: 3px solid #D2B87A; z-index: 9; left: 50%; -webkit-transform: translate(-50%, 0%) rotate(45deg); -moz-transform: translate(-50%, 0%) rotate(45deg); transform: translate(-50%, 0%) rotate(45deg); -webkit-animation: fade_move_down 4s ease-in-out infinite; -moz-animation: fade_move_down 4s ease-in-out infinite; animation: fade_move_down 4s ease-in-out infinite; } /*animated scroll arrow animation*/ @-webkit-keyframes fade_move_down { 0% { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @-moz-keyframes fade_move_down { 0% { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; } } @keyframes fade_move_down { 0% { transform:translate(0,-10px) rotate(45deg); opacity: 0; } 50% { opacity: 1; } 100% { transform:translate(0,10px) rotate(45deg); opacity: 0; } } /* === END SCROLL BUTTON ============ */ HTML (in a code block): <div class="scroll-down"></div> JS (in page header code injection): <!-- JQUERY --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- END JQUERY --> <script> $('.scroll-down').click(function() { $('html, body').animate({ scrollTop: $('page-section').next().offset().top }, 1000); }); </script> Any help on this would be hugely appreciated! Thanks in advance 🙂

try this: .sqs-mobile-info-bar-dark { background-color: green !important; }

Hi folks, Anyone know how to force the hamburger menu on all screen sizes AND have it display to the right of the screen? N.B. the site has both the shopping cart and the members login enabled and also the social media links. Ideally, I'd like to end up with the following: Logo on the left Account Login | social links | shopping cart | Burger Menu on the right. The site is: https://jezrose.squarespace.com/home password: flowerpower Screenshot of the desired outcome attached. Unfortunately the code I am currently using means that resizing the browser window makes the burger icon cover the other header actions. the current code I'm using is: /* 768 for tablet - desktop - 992 for desktop */ @media screen and (min-width:768px) { /* hide navigation */ .header-nav { display: none; } /* show burger */ .header-burger { display: flex; } /* Show overlay mobile menu */ .header--menu-open .header-menu { opacity: 1; visibility: visible; } } .burger-box { position: absolute; right: -88vw!important; top: -15px; margin-left:50px }

How do I do this please?

Hey @WillMyers, is there a way that this can change the date format in the email that's sent when they submit the form too? or would that still arrive as MM/DD/YYYY?

Looks amazing!

Hey @tuanphan, Thanks for getting back to me. I got this to work with help from @bangank36 on a different thread. Site: drirykl.squarespace.com PW: drirykl and the code that worked was: .header-title-logo { opacity: 0; position: relative; top: -10vh; transition: all 0.75s; } .shrink .header-title-logo { opacity: 1; position: relative; top: 0; }

Hey @tuanphan, Thanks so much - this worked great for me too! Is it possible to do this so the logo fades/slides in gradually?