zzlogan

I had to use this code to change the text of the placeholder 
 
.sqs-block-form .field-element::placeholder { font-family: 'YOUR FONT' !important; }  

I tried this, and it is working
 
/* Style the links inside the sidenav */ #mySidenav a { position: absolute; /* Position them relative to the browser window */ right: 0em; /* Position them outside of the screen */ //transition: .1s; /* Add transition on hover */ padding: 10px; /* 15px padding */ position: fixed; width: 100px; /* Set a specific width */ text-decoration: none; /* Remove underline */ font-size: 15px; color: #ebb646; //#ffad77 //border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */ z-index: 7990; } #mySidenav a:hover { right: .444em; /* On mouse-over, make the elements appear as they should */ } /* The about link: 20px from the top with a green background */ #supload { top: 370px; //background-color: #04AA6D; } #sos { top: 400px; //background-color: #2196F3; /* Blue */ } #govote { top: 430px; //background-color: #2196F3; /* Blue */ } #solarstates { top: 460px; //background-color: #f44336; /* Red */ } #neuronnectar { top: 490px; //background-color: #555 /* Light Black */ } #rdoor { top: 520px; //background-color: #555 /* Light Black */ } #aboutme { top: 550px; //background-color: #555 /* Light Black */ } @media screen and (max-width:740px){ #block-yui_3_17_2_1_1632919836480_17663{ display:none; }} html { --scroll-behavior: smooth; scroll-behavior: smooth; } with these code injections
Header
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.header-menu-nav-item a').click(function(){ $('body').removeClass('header--menu-open'); $('button.header-burger-btn.burger').click(); }); }) </script> Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 100, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if }); }); </script>  
This is working well, only thing is finding a way to change the font color when the text glides over a new background color.  I have tried invert, but it only works with static text, not when I scroll down the page the text just stays the same color.

Would anyone know how to change the text color when scroll into a new section?
 
@tuanphan @bangank36 @creedon

thank you!
 

@creedon, this works great! thank you for this! it works great and am now just copying that for the different pages that have the same thing and replacing "magazine" with "blog", and it just works.  Thank you for sharing this approach. 

It may be possible to do this with CSS only but it seems to me it would be a more tortuous route. Javascript seems a better fit here.
Add the following to Settings > Advanced > Code Injection > HEADER. The OP doesn't need to do this step as they already have jQuery installed.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> Add the following to Settings > Advanced > Code Injection > FOOTER.
<script>   $( ( ) => {        /*            begin add navigation magazine underline to magazine subpages              Version       : 0.1d0              SS Version    : 7.1              Dependancies  : jQuery              By            : Thomas Creedon < http://www.tomsWeb.consulting/ >              no user serviceable parts below              */              // bail if not magazine subpage              if ( ! location.pathname.startsWith ( '/magazine/' ) ) return;              $( '.header-nav-item [href="/magazine"]' )                .parent ( )                  .addClass ( 'header-nav-item--active' );                // end add navigation magazine underline to magazine subpages            } );        </script> Let us know how it goes.

Hi. What is site access password?

This is one of those questions where the answer should be simple, but CSS doesn't give you control over the spacing between the dots/dashes. Which means that any answer that gets you exactly what you want can become more than a little complex...
First option here is that you can fake the border with a background-image. Look here and there's a generator someone wrote on codepen  that will help you get something you want. you can then just copy the css it outputs into your button css. there's also a lot of fancy options available here too, including animating stuff etc.
More Control Over CSS Borders With background-image | CSS-Tricks
 
However, you might notice that CSS actually uses a different algorithm to draw a dashed border, i.e. it will always draw L shapes at every corner and then make sure that the corners have the right dash length, which this background image approach doesn't do. 
So if you want to be pixel perfect that makes things a little trickier too. if you want to do that you have to build a background image and then slice it up into 9 squares using the css border-image properties. it's tricky to be honest, but it can be done. 
try this for example:
.button-block .sqs-block-button-element { border-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyNyIgd2lkdGg9IjI3IiBoZWlnaHQ9IjI3Ij48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48cGF0aCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIGQ9Ik0gMCAwIEwgNiAwIDYgMyAzIDMgMyA2IDAgNiBaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PHBhdGggIHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgZD0iTSAwIDIxIEwgMCAyNyA2IDI3IDYgMjQgMyAyNCAzIDIxIFoiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cGF0aCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIGQ9Ik0gMjcgMjEgTCAyNyAyNyAyMSAyNyAyMSAyNCAyNCAyNCAyNCAyMSBaIiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PHBhdGggc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIiBkPSJNIDIxIDAgTCAyNyAwIDI3IDYgMjQgNiAyNCAzIDIxIDMgWiIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgeD0iMTAuNSIgeT0iMCIgd2lkdGg9IjYiIGhlaWdodD0iMyIgZmlsbD0iYmxhY2siIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHNoYXBlLXJlbmRlcmluZz0iY3Jpc3BFZGdlcyIgeD0iMTAuNSIgeT0iMjQiIHdpZHRoPSI2IiBoZWlnaHQ9IjMiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cmVjdCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIHg9IjAiIHk9IjEwLjUiIHdpZHRoPSIzIiBoZWlnaHQ9IjYiIGZpbGw9ImJsYWNrIiBzdHJva2U9Im5vbmUiLz48cmVjdCBzaGFwZS1yZW5kZXJpbmc9ImNyaXNwRWRnZXMiIHg9IjI0IiB5PSIxMC41IiB3aWR0aD0iMyIgaGVpZ2h0PSI2IiBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIi8+PC9zdmc+") 6 / 8px / 10px round; } I generated the SVG image its using as a background, but haven't made it up as a reusable codepen yet to allow you to generate one.
I think you'll be fine with the first option, but when I get time I'll make up the border-image one as a codepen and post the answer here

Í í
 
It called same-page navigation, you can find more info about it here
Creating same-page links in Squarespace ▪️ Launch the Damn Thing!

Hey Zack, just responded to your email re:Image above the tabs. Should be possible, but you'll need to use a :before pseudo-selector.  I'd definitely recommend my Tabs (For Sections) over the Secondary Nav for your other question though. The secondary nav is meant to be more similar to a site navigation rather than a page navigation. 

It's call tabs, you can check one of these tuts do achieve it
Simple Tab Sections in Squarespace 7.0 & 7.1 | Will Myers | Get Better At Squarespace (will-myers.com)

Site URL: https://pomegranate-badger-p3wd.squarespace.com/config/
Is it possible to click a button/hyperlink and then the web page responds with content underneath it? 
 
 

awesome, thank you Erika!

Hi,
Sure, with the below (enclose the below in your 1024px media query if you want the rounded effect etc on mobiles/tablets only). You may need to adjust your logo padding slightly again after this 🙂
.header-actions-action--cta a {
border-radius: 5px;
padding: 0.8em 0.8em !important;
}

Hi,
I edited one of @tuanphan responses to a similar query, with some tweaks for your setup:. Tuan is the expert, I'm still learning 🙂
@media screen and (max-width:1024px) {
/* show button */
.header-actions {
    display: block !important;
}
.header .header-actions-action--cta {
    display: block;
          width: 10% !important;
}
/* logo width */
.header-title-nav-wrapper {
    flex: 50% !important;
}
}

.header  .header-mobile-layout-logo-center-nav-left .header-display-mobile .header-title .header-mobile-logo {
    padding-right: 0px;
    padding-left: 10px;
    }