mgcreative

Site URL: https://crocodile-perch-3bhz.squarespace.com/ I'm not skilled in javascript at all, so could someone help me figure out how to edit the script I'm using to remove the mobile link? I just want it to be clickable on desktop and not have the 'All "Folder Name"' on mobile. Thanks! Site PW: SCALE https://crocodile-perch-3bhz.squarespace.com/ <script> (function () { let folders; function rebuildAnchor(folder) { let parent = folder.closest('.header-nav-item--folder'), href = folder.href.includes('.com') ? folder.href.split('.com')[1].replace("-folder/", "") : folder.href.replace("-folder/", ""), anchorClone = folder.cloneNode(true); anchorClone.classList.add('clickable-folder'); anchorClone.setAttribute('href', href); anchorClone.style.cssText = ` opacity: 1; transform: unset; `; parent.insertAdjacentElement('afterbegin', anchorClone); if (href == window.location.pathname) { console.log() anchorClone.closest('.header-nav-item--folder').classList.add('header-nav-item--active') } } function addToMobile(folder) { let href = folder.getAttribute("href"), hrefAdjusted = href.includes('.com') ? href.split('.com')[1].replace("-folder/", "") : href.replace("-folder/", ""), text = folder.innerText, newText = `All ${text}`, mobileFolder = document.querySelector(`[data-folder="${href}"]`), backButton = mobileFolder.querySelector(".header-menu-nav-folder-content > *:first-of-type"), allButton = `<div class="container header-menu-nav-item header-menu-nav-item--external"> <a href="${hrefAdjusted}">${newText}</a> <div>`; backButton.insertAdjacentHTML('afterend', allButton) } /* Select All Folder Links & */ function setFolderLinks() { folders = document.querySelectorAll('.header-display-desktop .header-nav-folder-title[href*="-folder/"]'); for (let folder of folders) { window.addEventListener('load', function() { addToMobile(folder); rebuildAnchor(folder); folder.remove(); }); } } setFolderLinks(); })(); </script>

Thank you so much! Since this code affects the header nav (and not the blog post featured image), and it's a split screen section, I just adjusted the gradient angle and only made it go halfway across. It's not perfect but it does the job! Here's the adjusted code I used if anyone is interested. body[class*="type-blog"].view-item header#header { background-image: linear-gradient(175deg, rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0) 60%); }

Small world!! Thanks, I'll take a look at the latest one.

It also broke my full width background, and I removed this section (and tried it with it included), but it's still adding padding to each side. Any fix? @tuanphan Site is: https://crocodile-perch-3bhz.squarespace.com/about (PW: SCALE) i

Hi, I'm trying to add an overlay gradient (black) from top top bottom just on the header image of a blog - so that the logo in the top left corner is visible even when the photo is light. I'm using this code, but adjusted so it's left and right split. https://www.will-myers.com/articles/adding-a-banner-image-to-a-blog-in-squarespace-71 Site is: https://turbot-cranberry-rn5c.squarespace.com/resources/article-titleto-go-here-wkjfr-bs59n Password CPI Screenshot attached. Thanks!

I'm trying to do the same thing! Remove the active style from the folder... I just posted about it here:

Trying to make just the folder navigation stay highlighted (like my hover state). And I was able to achieve it, but I don't want the folder contents to also be highlighted (the standard active underline is fine, but not the background). This is as far as I got with code, but I can't figure out how to exclude the folder contents. Password: SCALE https://onion-copper-fxzk.squarespace.com/ .header-nav-wrapper .header-nav-item--active a { padding: 5px 8px !important; background-image: none !important; transition: all ease-in-out .05s !important; } .header-nav-wrapper .header-nav-item--active a { background: #E5EBEE; color: #082F4E; padding: 5px 8px; border-radius: 8px; transition: all ease-in-out .05s !important; } :not(.header--menu-open) .header-nav-wrapper .header-nav-item--active a { color: #082F4E; }

I'm having trouble with a client's Acuity Scheduler in regards to the Google Calendar Sync. Her email address/Google Workspace is the one that's connected to her Acuity, but my email address is showing up on her appointments. See screenshot below. They are her events, but I'm trying to understand why my email is showing up? Mine is the "work@morgangrantcreativ..." Thanks!

Hey Vanessa, I did not! But I'll post here if I do. 🙂

I'm trying to achieve a sticky scroll background image on portfolio pages (https://mg-creative.squarespace.com/projects/kaylee-cook-design and https://mg-creative.squarespace.com/projects/hayley-alexandra-events). I also have a full site border, and on the pages where something is sticky, the image is showing up on the top, bottom and left sides where the border should be. I have a bit of code on this site, so trying to figure out what needs to be adjusted! Thanks! Below are the codes I'm using for both site border and sticky sections. //Add Site Border body:not(.sqs-edit-mode-active) { &, #header { border: clamp(12px,4vw,15px) solid #534A3A; transparency: none; z-index: 999!important; } #header { border-bottom: none; } } //Portfolio Sticky Sections section[data-section-id="65a1e182f4576c65330892fd"], section[data-section-id="65b3ed1b350827759e9d9577"] .section-background img { position: fixed !important; top: 0 !important; } section[data-section-id="65a1e182f4576c65330892fd"], section[data-section-id="65b3ed1b350827759e9d9577"] .section-border { overflow: hidden !important; z-index: -999; } footer.sections, footer.sections section { z-index: 999 !important; }

I'm trying to figure out why the logo on the client receipts is super small or distorted on some devices! I've uploaded the correct size as 600x120... but it still is incorrect. Thanks! Attaching the logo I'm using, and then some screenshots:

Hi! I would love some assistance on why the spacing on my site seems to vary so much from the Preview to pretty much any other platform. I'm mainly looking at the site margins (and I already tried adjusting in style settings - it didn't help) and the size of all the content (it seems to get much bigger outside of Preview). Any assistance would be helpful! Site is: kayleecookdesign.com Attached are screenshots:

Okay, I actually think I figured it out (may need some adjustment - open to suggestions!). But for anyone searching: I used this code -- a Code box on the column, and then just adjusted the top px. Source: Will Myers Add this to Custom CSS: @media(min-width:767px) { .col.wm-sticky-column { position:sticky; top: 150px; } } Put this in a code box in the column you want (works for blog posts, even in fluid engine): <div class="wm-sticky-column"></div> <script> (function() { function initSticky() { let stickyStarts = document.querySelectorAll('.wm-sticky-column'); stickyStarts.forEach(el => { let col = el.closest('.col'); if (!col) return; col.classList.add('wm-sticky-column'); }); } window.addEventListener('DOMContentLoaded', initSticky); }()); </script>

I'm trying to create a sticky scroll blog page here: https://kayleecookdesign.squarespace.com/projects/blog-post-title-one-lgwb5 Password: KAYLEE The example my client like is here: https://www.yondinteriors.com/projects/wabisabicottage -- Would love some help with making the left column sticky and the gallery to scroll. Thanks!

Yes! I am trying to minimize the width between the two arrows - I'd like them to be closer together in the center of the screen. @tuanphan