jorohaco

Replace the code with the code below 
@media screen and (max-width: 1024px) { .header-display-desktop, .header-actions, .header-actions-action { display:flex !important; } .header-burger, .header-display-mobile { display: none !important } .header .header-title-nav-wrapper { flex: 1 0 60% !important } .header-title { max-width: 50% !important; } }  

Nevermind. I fiddled with the code above and got it working! Thanks much!

pretty certain your url didn't upload correctly as if you visit the svg link directly it's just a blank screen. To be honest though, for just a small SVG like this, I'd encode it with a data url and then you can just do it all in CSS and you won't have to upload it anywhere.
go to a website like this SVG to Data URI encoder (heyallan.github.io), copy your svg code in (just open your file with a text editor) click encode copy the output into your url (it will read something like url("data:image/svg+xml,....."))
should work just fine.
further thought:
If I was being totally honest, I'm not mad keen on the idea of putting the background-image rule directly on the SVG. doesn't sit right with me. I think it would be better to hide the SVG and then apply your background css rules to the containing link element. something like this
.header-actions-action.header-actions-action--cart svg, .header-actions-action.header-actions-action--cart .icon-cart-quantity { display: none !important; } .header-actions-action.header-actions-action--cart a { display:block; width: 32px; height: 32px; background-size: 32px 32px; background-image: url("data:image/svg+xml,%3Csvg stroke='currentColor' fill='currentColor' stroke-width='0' viewBox='0 0 24 24' height='1em' width='1em' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Shopping_Cart' dataName='Shopping Cart'%3E%3Cpath d='M2.86,3.95H2.85l.05.53Z'%3E%3C/path%3E%3Cg%3E%3Cpath d='M6.217,15.662a2.492,2.492,0,0,0,2.49,2.27h9.07a2.492,2.492,0,0,0,2.49-2.27l.67-7.52a1.478,1.478,0,0,0-.39-1.15,1.507,1.507,0,0,0-1.11-.49H6.407l-.14-1.82a1.752,1.752,0,0,0-1.74-1.61h-.97a.5.5,0,0,0-.5.5.508.508,0,0,0,.5.5h.97a.752.752,0,0,1,.75.69Zm13.05-.09a1.492,1.492,0,0,1-1.49,1.36H8.707a1.492,1.492,0,0,1-1.49-1.36L6.487,7.5h12.95a.49.49,0,0,1,.37.16.516.516,0,0,1,.13.39Z'%3E%3C/path%3E%3Ccircle cx='9.946' cy='19.928' r='1'%3E%3C/circle%3E%3Ccircle cx='16.436' cy='19.928' r='1'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; }  

You can upload an CVG file by going to the pages menu, then adding a link, click file, then upload the SVG there, and make note of the file URL. Then go back to the CSS and add that file URL. Hope that helps!

2 options to do this
Option 1. Create a new page with name "Work" > Add Gallery Section - Grid >> Enter Text/Url same as portfolio projects. Thus, you can enter any urls
(We will give code to make image zoom on hover)
Option 2. Add this code to Settings > Advanced > Code Injection > Footer
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('a.grid-item[href="/work/velaandmali"]').attr('href','https://google.com'); $('a.grid-item[href="/work/terrainartlandscaping"]').attr('href','https://abc.com'); $('a.grid-item[href="/work/owanocoffee"]').attr('href','https://facebook.com'); }); </script> Do similar for other items

Use this
[data-section-id="62d1ca1f7242da41460f5e9f"] .list-section-title p { font-family: 'barlow_semi_condensedblack', sans-serif !important; letter-spacing: -1px !important; }  

The simplicity of this solution makes me kick myself that I hadn't thought of it. This worked perfectly. Thank you @creedon

Hi all, incase anyone is looking for a fixed background over an entire page with one of the built-in image effects, here's how I cobbled a solution together:
1. Moved all sections together into one single section with the section at the widest width.
2. Added code and spacers to skinny up a few of the blocks that hadn't been the widest width.
3. Added this code to fix the background's position:
** I chose to apply the background without code to utilize squarespace's responsive cropping. I like the focus feature personally. Applying the background this way also allowed me to use a built in webGL filter for some extra razzle-dazzle.

Add to Home > design > custom CSS
@media screen and (max-width:640px) { /* 2 */ div#block-yui_3_17_2_1_1578277238401_75781+.row { display: flex; flex-direction: column-reverse; } /* 4 */ div#block-yui_3_17_2_1_1578780160732_20104+.row { display: flex; flex-direction: column-reverse; } }  

Actually, use this bit instead to adjust it:
 
.image-block-outer-wrapper.combination-animation-slide-up.animation-loaded.sqs-text-ready .sqs-dynamic-text-container {
  opacity: 1;
  position: relative;
  left: 10px;
  top: 40px;
  }

@C-A Add the following code to "code injection" --> "footer".
<script>
  
$('.header-menu-nav-item > a').click(function() {
  $('.header-burger-btn').click();
});
</script>

Index pages with anchor links to the various sections of the index are a very common website setup nowadays. Unfortunately the anchor links do not work correctly on mobile. In my case, when clicking an anchor link doesn’t close the menu and scroll to the correct section. 
 
My idea of solution is to add a click event. When clicking the anchor link, the mobile navigation will close.
 
But this function still not work at my website. Can anyone tell me is that anything I did wrong?
 
My website: I-kinball.org (pw: treats)
reference website: riverstonedigital.com  (mobile version)
 
This is the function I added:
<script> //Anchor link fix function anchorLinks(){ Y.all("a.Mobile-overlay-nav-item").on('click',function(){ Y.one('body').removeClass('is-mobile-overlay-active'); }); Y.all("a.Mobile-overlay-folder-item").on('click',function(){ Y.one('body').removeClass('is-mobile-overlay-active'); }); } // DOM Ready Y.on('domready', function(){ anchorLinks() }); //RSD Mutation Boserver wrapper function RSD_init(){ anchorLinks(); } // add watch function to window.onload window.onload = RSD_watch; // watch function to look for page changes using Mutation Observer function RSD_watch() { MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var mo = new MutationObserver(function(mo) { var moCount = 0; for (var b = 0; b < mo.length; b++) { var c = mo[b]; if ("attributes" === c.type && moCount === 0) { RSD_init(); } } }); var options = { attributes : true, attributeFilter : ['id']}; mo.observe(document.body, options); } </script>