PEARLERwork

Site URL: https://liyasafina.squarespace.com/?password=pearler I want this watermark to automatically appear at the top of all pages whenever my client adds new pages. I'm trying to target the first section of each page with CSS, but I'm finding this isn't working - it's applying the element on all sections: section:first-child::before { content: ""; position:absolute; background-image:url(https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633f502193330b5f428da186/1665093665442/Watermark.svg); background-size:contain; background-repeat:no-repeat; width: 85%; height: 85%; top: 7%; right: -50vw; z-index:2; } I've also tried this - nothing appears section:nth-child(1)::after as well as this, in the hope that I could just make every 1st section on the site have a specific width, except the homepage have this - but nothing appears. This also happens using the width option. [data-current-styles*='"customSectionHeight”: 41’] { section::before {

Yeah that worked beautifully, thank you ✿ @Ziggy

Site URL: https://liyasafina.squarespace.com/?password=pearler I've created some psuedo buttons with the following code. However I can't seem to figure out how to make the icon beside it larger/ not cut off? Desired look attached. // PSEUDO ARROW BUTTONS ➷ ☯ ☯ ☯ ☯ // .sqsrte-small a strong { background-size:0px !important; text-decoration:none !important; position:relative; line-height:1em !important; text-transform: uppercase; font-family: 'Inter' !important; font-size: 1rem !important; } [data-section-theme="white"] { .sqsrte-small a strong::after { content: ""; background-image:url('https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633bade0bf0e4c428278ee8e/1664855520990/Arrow-Dark.png'); display:inline-block; background-repeat:no-repeat; background-position:center center; background-size:70%; pointer-events:auto; opacity:1; transition:opacity .8s, transform .5s; height:100%; position:absolute; top:0; padding:0em 1.4em; } } Thanks!

Site URL: https://liyasafina.squarespace.com/?password=pearler I've quite heavily customised this navigation bar, however I'm struggling to get on of the elements to respond to different screen sizes properly. I'd love to know if I've gone to far or if this is fixable 🙂 https://liyasafina.squarespace.com/?password=pearler // SPLIT NAV➷ ☯ ☯ ☯ ☯ // .header-nav { position: absolute; top: -10px; bottom: 0; margin-top: 0!important; } .header-nav-item:nth-of-type(1) { margin-right: 250px!important; } .header-title-logo a { z-index: 1000; position: relative; } // FORCE MOBILE MENU ➷ ☯ ☯ ☯ ☯ // .header-display-desktop { .header-burger { position: absolute; left: 0; } } @media screen and (min-width:768px) { .header-nav { display: none; } .header-burger { display: flex; } .header--menu-open .header-menu { opacity: 1; visibility: visible; } } // STYLING ➷ ☯ ☯ ☯ ☯ // .header { padding-left: 2vw !important; padding-right: 2vw !important; } .header-announcement-bar-wrapper { margin-top: 2vh !important; } .header-blur-background { border: 1px solid #fff; border-radius: 100px !important; padding: 1em !important; } // POP OUT MENU STYLING ➷ ☯ ☯ ☯ ☯ // .header-actions-action .theme-btn--primary-inverse { color: #fff !important; } .header-menu { backdrop-filter: blur(20px)!important; } .header-menu-nav-item { border: 1px solid @white; border-radius: 1000px !important; margin-bottom: 3vh !important; } .header-menu-nav-folder .sqs-button-element--primary { display: none !important; } @media screen and (min-width: 768px) { .header-menu-nav-item a { font-size: 3vmin; } } // ARROW ICON ➷ ☯ ☯ ☯ ☯ // .header-actions-action--cta::before { content: ""; position:absolute; background-image:url(https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633b8cbffda77e2e702deadb/1664847039839/Arrow.png); background-size:contain; background-repeat:no-repeat; width:200%; height:200%; top: -50%; left: 6vw; z-index:2; } // PSEUDO 'MENU' WORD ➷ ☯ ☯ ☯ ☯ // .burger-box::after { content: "MENU"; color: #fff; font-family: 'Inter' !important; font-size: 1rem; position:absolute; top: 25%; left: 75%; z-index:2; } // CUSTOM BURGER ICON ➷ ☯ ☯ ☯ ☯ // .burger-inner .top-bun, .burger-inner .patty, .burger-inner .bottom-bun { background-color:transparent !important; } .burger-inner::before { content:""; background-image:url("https://static1.squarespace.com/static/63157662f6b5811cc3a430b2/t/633b8ac03c30215fd4c6a749/1664846528294/Burger.png"); background-size:cover; position:absolute; width:150%; height:150%; z-index:2; top: -30%; left:-2vw; } // MOBILE MENU SPACING ➷ ☯ ☯ ☯ ☯ // .header-menu-nav-folder-content { flex-grow: unset !important; width: 95%; margin: auto; } .header-menu-nav-item a { margin: 2vw 2vw !important; } Big thanks!

Thanks! Strange, it seems to just be happening in preview mode. @paul2009 @creedon

Site URL: https://pearler-cosmo-a.squarespace.com/?password=pearler https://pearler-cosmo-a.squarespace.com/?password=pearler For some reason, the header and footer isn't appearing on my cart page. I can't seem to figure out what code might be interfering here?

Is it possible to make a Javascript cursor like this only appear when certain elements are hovered over? @tuanphan

Site URL: https://one-is.com/ Does anyone know how to create this kind of effect in Squarespace? Happy to hire someone who knows how. It's triggered by scrolling, not hovering. https://one-is.com/

@tuanphan Perfect, easy - thank you!

Site URL: https://realm-template.squarespace.com/?password=pearler I'm using a Gallery Block set to slideshow. I'd really like the captions permanently showing - currently they only appear on hover. Is this possible to get around? https://realm-template.squarespace.com/?password=pearler

Site URL: https://purposecon.squarespace.com/?password=pearler On mobile, we're having some margin issues on mobile for the footer. Code I've tried: section[data-section-id="62ba928dc2316b45f5f05826"] .sqs-layout>.sqs-row { margin-left: 17px !important; padding-left: 17px !important; } It works, then I refresh the page and it's back to the same issue. When I duplicated the footer and deleted the original one, this also fixed it, then it reverted back. Very strange!

@tuanphan Awesome, thank you

Thanks very much. Do you know why it's not appearing on other pages? @tuanphan / @bangank36 The page is https://purposecon.squarespace.com/shop Pass: pearler For positioning, this fixed it: .floating-cart { top: 20px !important; bottom: auto !important; }

Site URL: https://purposecon.squarespace.com/?password=pearler I'm trying to style and reposition the floating cart. Any ideas? My codes don't seem to work: .floating-cart { top: 20px !important; right: 20px !important; } It also doesn't seem to appear on non-shop related pages?

@tuanphan Unfortunately it hasn't worked when I've removed variables also

Site URL: https://southernspells.squarespace.com/readings For some reason, a few text elements are rendering with no font applied on mobile (iPhone). I'm just using standard Squarespace fonts, however I have used CSS variables so that it applies certain fonts i.e. "@subheading". Variables @heading: 'guanabara-sans'; @paragraph: 'proxima-nova'; @subheading: 'proxima-nova-condensed'; CSS for affected areas .summary-title, .product-price, .variant-option-title, .ProductItem-nav-breadcrumb-link { font-family: @heading !important; } h3 strong, h4 strong, a.product-title { font-family: @subheading !important; text-transform: uppercase !important; letter-spacing: 0.25em !important; } Affected areas (screenshot) https://share.getcloudapp.com/P8u18jdr

@bangank36 thanks this also worked how I hoped ✓

Site URL: https://flex-mami.squarespace.com/?password=pearler I'm using a custom coded menu to display mobile navigation links. I'm having some issues vertically/center aligning the links, however: Site: https://flex-mami.squarespace.com/?password=pearler Created via this page: https://flex-mami.squarespace.com/pop-one Thanks!

@bangank36 Thanks a lot, this worked great. My only other question would be how to add code so that this doesn't apply while in edit mode? It's stopping me from being able to edit the blocks.

@tuanphan @bangank36 would love your help! 🙂

@moonlitdesign unfortunately not!

Site URL: https://finch-tetra-4yf2.squarespace.com/?password=pearler I'd love to add a checkerboard pattern to this section I've made (attached) Inside code block: <div class="wavy-path"> <svg version="1.1" class="wavy-svg-one" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1579 285" xml:space="preserve"> <style type="text/css"> .path-bg { fill: red; } .path-text { fill:none; } </style> <g> <path class="path-bg" id="path-bg-one" d="M785.93.06c60.14-1,118.16,9.59,177.38,32.35C1014.39,52.05,1059.74,78,1103.6,103c62.57,35.73,121.66,69.48,189.27,80,75.43,11.79,154.17-6.38,247.79-57.16l38.15,70.31c-57.23,31.05-110,51.29-161.27,61.87-47.19,9.74-92,11.06-137,4-82.15-12.84-150.5-51.88-216.59-89.63C979,124,898.87,78.2,787.25,80.05S597,130.33,513.81,181.6C449,221.53,382,262.81,300.31,278.37c-44.75,8.52-89.59,8.69-137.07.52C111.62,270,58.22,251.54,0,222.41l35.79-71.55c95.26,47.66,174.56,63.2,249.55,48.92,67.22-12.8,125.17-48.5,186.51-86.29,43-26.49,87.47-53.88,137.87-75.21C668.15,13.56,725.79,1.06,785.93.06Z"/> </g> <path id="path-text-one" class="path-text" d="M17.9,186.64C395.25,375.42,478.79,45.17,786.59,40.06s402.26,322.19,773.14,121"/> <text width="100%" style="transform:translate3d(0,0,0);"><textPath class="text-path" alignment-baseline="top" xlink:href="#path-text-one" startOffset="-3200" id="path-text-one-letters"> <tspan id="path-span-one"> Learn the Code - Create the Unexpected - Charge with Confidence - Learn the Code - Create the Unexpected - Charge with Confidence - Learn the Code - Create the Unexpected - Charge with Confidence - Learn the Code - Create the Unexpected - Charge with Confidence - Learn the Code - Create the Unexpected - Charge with Confidence -Learn the Code - Create the Unexpected - Charge with Confidence - Learn the Code - Create the Unexpected - Charge with Confidence - Learn the Code - Create the Unexpected - Charge with Confidence - Learn the Code - Create the Unexpected - Charge with Confidence - Learn the Code - Create the Unexpected - Charge with Confidence - Learn the Code - Create the Unexpected - Charge with Confidence - </tspan> <animate attributeName="startOffset" repeatCount="indefinite" from="-3200" to="0" begin="0s" dur="150s" ></animate> </textPath> </text> </svg> </div> Inside custom CSS: // ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ WAVY MARQUEE ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ ☯ // section[data-section-id="622fdfe39420130436619447"] { z-index:2; .content-wrapper, .sqs-row { position:static !important; } .code-block { position:absolute; width:100%; bottom:0; left:0; padding:0 !important; transform: scale(1.2) rotate(-5deg)translateY(5%); } } .path-bg { fill: #fff !important; } #path-span-one { fill: #000; font-family: @heading; } #sections { overflow:hidden; } @media screen and (max-width:767px) { section[data-section-id="61c10b59ddbd633522652f9b"] { .code-block { transform:scale(2.0) translate(10%,10%); } #path-span-one { font-size:2rem !important; } } }

Site URL: https://flex-mami.squarespace.com/?password=pearler I'm hoping to make my homepage design a fixed height on all browsers - no scroll. I'm struggling to do this when it has 2 sections on the homepage. Current view/Desired view attached Thanks!

Site URL: https://flugelhorn-moose-mmzk.squarespace.com/ I'm getting horizontal scroll on this website. I've seen a lot of posts about this and tried lots of different codes - I'd love some help. Thanks!

@RylanCzuczman @whartonstudio @sarahjohanna Hey Guys, this is what I ended up using: https://www.will-myers.com/change-the-background-color-on-scroll-in-squarespace