Lesum

@SelwynGoodmanHi! So, you just want to change the design of the product categories to match the example you shared, and keep everything else the same?

@FDT First option: To display the button below the logo, you can add this code under Website > Pages > Website Tools > Custom CSS @media screen and (max-width: 1024px) { #header .header-actions.header-actions--right, #header .header-actions-action.header-actions-action--cta { display: flex !important; } #header .header-title-nav-wrapper { flex: 1 0 30% !important; } #header .header-burger { display: none; } #header .header-display-mobile { display: flex; flex-direction: column; gap: 10px; } } Second option: To display the button and social icons inside the mobile menu, first remove the code you’ve added under Website > Pages > Website Tools > Code Injection > Footer. (There are some errors in this code you added, which are fixed by the code I'm sharing below. You can keep the corrected code I’m providing, regardless of which option you choose. <script> $(document).ready(function() { $('<a href="https://static1.squarespace.com/static/6732656989bc0a5a1301074e/t/67463c3c3b75f32465af5b03/1732656188628/pngwing.com-3.png" class="logo1"><img src="https://static1.squarespace.com/static/6732656989bc0a5a1301074e/t/67463c3c3b75f32465af5b03/1732656188628/pngwing.com-3.png"/></a>').insertBefore('.header-title-nav-wrapper'); }); </script> then replace it with the following code: <script> $(document).ready(function() { var aTag = $('<a>', { href: "https://www.unleashedpodcast.org/", class: "logo1" }); var imgTag = $('<img>', { src: "https://static1.squarespace.com/static/6732656989bc0a5a1301074e/t/67463c3c3b75f32465af5b03/1732656188628/pngwing.com-3.png" }); aTag.append(imgTag); var headerTitleNavWrapper = $('.header-title-nav-wrapper'); var headerTitle = headerTitleNavWrapper.find('.header-title'); headerTitleNavWrapper.prepend(aTag); }); </script>

Hi @Elletra To dynamically align the list item descriptions at the same starting position, regardless of the number of lines in the list item titles, you can add this code under Website > Pages > Website Tools > Code Injection > Header. <script> document.addEventListener('DOMContentLoaded', function () { const titles = document.querySelectorAll('.list-item-content__title'); let maxHeight = 0; titles.forEach(title => { maxHeight = Math.max(maxHeight, title.offsetHeight); }); titles.forEach(title => { title.style.height = `${maxHeight}px`; }); }); </script> <style> .user-items-list-item-container[data-title-alignment="left"] .list-item-content__title { margin-left: 0; margin-right: 0; } .list-item-content__text-wrapper { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; } </style>

Hi @FDT, Your site is private. Can you publish the site with a site-wide password so I can take a look?

@SadieKramer Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to display the cover page in full height. .sqs-slide-wrapper[data-slide-type="cover-page"] .sqs-slide-layer.full-width-height { overflow: visible !important; } .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="gallery"], .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="gallery"]:not(.sqs-gallery-grid) .sqs-slice-gallery-item, .sqs-slide-wrapper[data-slide-type="cover-page"] [data-slice-type="gallery"].sqs-gallery-design-stacked:not(.sqs-gallery-grid) { height: auto !important; }

Hi @mavencreative, To make anchor links bold upon click or selection, add this code under Website > Pages > Website Tools > Code Injection > Header. <script> document.addEventListener("DOMContentLoaded", () => { const container = document.getElementById("block-yui_3_17_2_1_1727218004037_6070"); if (container) { const links = container.querySelectorAll("p a"); links.forEach(link => { link.addEventListener("click", () => { links.forEach(l => l.classList.remove("active")); link.classList.add("active"); }); }); } }); </script> <style> #block-yui_3_17_2_1_1727218004037_6070 a.active { font-weight: bold; } </style>

@KimDC Hi! You can try adjusting the site animation settings under Site Styles > Miscellaneous > Animations. If the issue persists, you can add this code under Website > Pages > Website Tools > Custom CSS. h2.blog-title.preFlex { opacity: 1 !important; transition: transform 0.1s !important; }

@Hanara It's basically the same code; you just need to change one class name. Here's the code for auto list carousel: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function () { $('.user-items-list-carousel__slides .list-item').each(function () { const button = $(this).find('.list-item-content__button'); const link = button.attr('href'); if (link) { $(this).css('cursor', 'pointer').on('click', function () { window.location.href = link; }); } }); }); </script>

@MissTippyTap Hi! You can add this code under Website > Pages > Website Tools > Custom CSS, to left align the header logo and reduce the size of the custom burger image. @media screen and (max-width: 767px) { #header .header-title a { position: relative; top: unset; left: unset; transform: unset; } #header .burger-inner:after { background-size: 70px; width: 70px; height: 40px; } #header .burger-box { width: 70px; height: 40px; } #header .header-burger { width: 70px; flex: 0 0 70px; justify-content: center; } #header .header-title-nav-wrapper { flex: 1 0 calc(100% - 70px); } }

@NishInwood Hi! You can add this code under Website > Pages > Website Tools > Custom CSS .products.collection-content-wrapper .grid-meta-status { font-size: 0 !important; padding-top: 5px; } .products.collection-content-wrapper .grid-meta-status .product-mark.sale::after { font-size: 1.1rem !important; line-height: 1em; } @media screen and (max-width: 767px) { .products.collection-content-wrapper .grid-meta-status .product-mark.sale::after { font-size: 1rem !important; } }

Hi @TylerJames4, If you want to hide TikTok and Pinterest across the entire site, including both the header and footer, you can add this code under Website > Pages > Website Tools > Custom CSS. @media screen and (min-width: 1025px) { a[aria-label="Pinterest"], a[aria-label="TikTok"] { display: none; } } If you only want to hide TikTok and Pinterest from the header navigation bar, you can add this code instead. @media screen and (min-width: 1025px) { #header a[aria-label="Pinterest"], #header a[aria-label="TikTok"] { display: none; } }

Hi @jamesschaffer, You can add this code under Website > Pages> Website Tools > Custom CSS to transform the color from black to white on buttons, social icons, header nav links and all text links throughout the site. /* Buttons */ #siteWrapper.site-wrapper .sqs-button-element--primary, #siteWrapper.site-wrapper .sqs-button-element--secondary, #siteWrapper.site-wrapper .sqs-button-element--tertiary { transition: all 0.1 ease; } #siteWrapper.site-wrapper .sqs-button-element--primary:hover, #siteWrapper.site-wrapper .sqs-button-element--secondary:hover, #siteWrapper.site-wrapper .sqs-button-element--tertiary:hover { background: #fff; color: #000; } /* Social icons */ .socialaccountlinks-v2-block .social-icons-style-border a:hover .sqs-use--icon, .social-account-links-v2-block .social-icons-style-border a:hover .sqs-use--icon { fill: #fff; } .socialaccountlinks-v2-block .social-icons-style-border a:hover, .social-account-links-v2-block .social-icons-style-border .sqs-use--icon { color: #fff; } /* Header */ #header .header-title-text a:hover { color: #fff; } #header .header-nav-item a:hover { color: #fff; } #header .header-actions .icon--fill svg:hover { fill: #fff; } /* Text Link */ a { transition: all 0.1s ease; } a:hover { color: #fff; } a:hover span { color: #fff; } Adding a hover color change to regular text (like headers and body text) that doesn’t have links can be confusing for users and may negatively impact your site’s usability. However, you can add this code to change color on non-link text: /* Text */ h1, h2, h3, h4, p { transition: all 0.1s ease; } h1:hover, h2:hover, h3:hover, h4:hover, p:hover { color: #fff; }

@Samk903Try adding this code under Website > Pages > Website Tools > Code Injection > Header. <script> document.addEventListener('DOMContentLoaded', function () { const button = document.querySelector('a[href="tel:3184150199"]'); if (button) { button.setAttribute('onclick', "return gtag_report_conversion('tel:3184150199')"); } }); </script> Note: This script only adds the onclick event (that you provided) to the button on your Squarespace site. Let me know how it goes.

Hi @bluethebear, You can add this code under Website > Pages > Website Tools > Custom CSS to change the header color, logo, and section background color on the product page you mentioned. For other product pages, simply copy and paste this block of code and replace the page ID with the corresponding product page's ID. #item-66aa9ac6ddc7683266f87a82 { #header .header-announcement-bar-wrapper .header-background-solid { background-color: #c5ffb6 !important; } .header-title-logo img { content: url('https://images.squarespace-cdn.com/content/65099cf8baecb06e881ee700/e3062e60-1d6d-499a-89bf-5c0b3da1f221/BluePrint+Football.png?content-type=image%2Fpng') !important; max-height: 71px !important; } #page .page-section .section-background { background-color: #e7ffe7 !important; } }

@NicholasThielmann Hi! You can add this code under Website > Pages > Website Tools > Custom CSS to display the gallery grid as a single column on mobile. @media screen and (max-width: 767px) { .gallery .gallery-grid--layout-grid .gallery-grid-wrapper { grid-template-columns: 1fr !important; } }

Hi @MeaganH, You can add this code under Website > Pages > Website Tools > Custom CSS to move the membership login button right below the description text. @media screen and (max-width: 767px) { [data-test="paywall-page-root"] { display: flex; flex-direction: column; } [data-test="paywall-page-root"] #headline { order: 1; } [data-test="paywall-page-root"] #description { order: 2; } [data-test="paywall-page-root"] .sqs-editable-button.sqs-button-element--primary.sign-in-button { order: 3; width: fit-content; margin: 0 auto; } [data-test="paywall-page-root"] .product-blocks-container { order: 4; } }

@eightyfourandahalf Here’s the code to remove 'all works' from all pages while keeping the rest of the breadcrumb. You can add this code under Website > Pages > Website Tools > Code Injection > Header. I tested the code thoroughly while writing it, but if you encounter any issues or make any changes, let me know. <script> function applyScriptForLargeScreens() { const breadcrumbContainer = document.querySelector('.products.collection-content-wrapper.products-list .nested-category-breadcrumb'); if (window.innerWidth > 575) { const firstLink = document.querySelector('.nested-category-breadcrumb .nested-category-breadcrumb-link[href="/all-works"]'); if (firstLink) { const spanToRemove = firstLink.nextElementSibling; firstLink.remove(); if (spanToRemove && spanToRemove.tagName === 'SPAN') { spanToRemove.remove(); } } var categoryTitle = document.querySelector('.nested-category-title').textContent.trim(); var categoryLink = document.createElement('a'); if (window.location.pathname.includes('/all-works/artists/')) { categoryLink.href = '/all-works/artists/' + categoryTitle.toLowerCase().replace(/\s+/g, '-'); } else { categoryLink.href = '/all-works/' + categoryTitle.toLowerCase().replace(/\s+/g, '-'); } categoryLink.className = 'nested-category-breadcrumb-link'; categoryLink.textContent = categoryTitle; if (breadcrumbContainer) { breadcrumbContainer.appendChild(categoryLink); } } } document.addEventListener('DOMContentLoaded', applyScriptForLargeScreens); window.addEventListener('resize', applyScriptForLargeScreens); </script> <style> @media screen and (min-width: 576px) { .tweak-products-header-text-alignment-left .products.collection-content-wrapper .nested-category-title { display: none !important; } .products.collection-content-wrapper .nested-category-breadcrumb{ border-bottom: 1px solid; padding-bottom: 10px; margin-bottom: 20px; } .products.collection-content-wrapper .nested-category-breadcrumb a { font-size: 24px; } } </style>

Hi @eightyfourandahalf, You can add this code under Website > Pages > Website Tools > Custom CSS .products.collection-content-wrapper .nested-category-tree-wrapper ul li:first-child { display: none; }

@Samk903 Another question: Does your gtag code look like this? If not can you share a screenshot of your gtag code (hiding the gtag ID) <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-XXXXXXXXXX'); </script>

@Samk903 Hi! Which specific button on your site would you like to add the gtag code to?

@ohhhgary Hi! You can add this code under Website > Pages > Website Tools > Code Injection > Header. You've to replace the image URL in the code as well. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <script> $(document).ready(function () { const $secondNavAnchor = $('.main-nav ul li:nth-child(2) a'); // Add image url here const imageUrl = "https://images.squarespace-cdn.com/content/v1/5db7ce0cbe792566a205ef14/1572460848759-GPQTEQ966PD9GQ5V2ZV0/Screen%2BShot%2B2019-10-30%2Bat%2B11.39.56%2BAM.jpg?format=750w"; $secondNavAnchor.empty().append(`<img src="${imageUrl}" alt="Navigation Image">`); }); </script> <style> .main-nav ul li:nth-child(2) a img { width: 100px; height: auto; } </style>

@sofinodesign Hi! You can check out this thread. Here’s the URL:

@brosyhale Yep, I missed a couple of things. I just updated the code—just remove the old code and add the new version from my previous comment.

@brosyhale Hi! You can try adding the following code to update the font for: Blog categories, form fields, buttons and cookie banner. /* Blog categories */ .blog-item-category-wrapper a { font-family: 'AzeretMono-Light' !important; } /* Buttons */ #siteWrapper.site-wrapper .sqs-button-element--primary, #siteWrapper.site-wrapper .sqs-button-element--secondary, #siteWrapper.site-wrapper .sqs-button-element--tertiary { font-family: 'AzeretMono-Light' !important; } /* Cookie banner */ .gdpr-cookie-banner * { font-family: 'AlteHaasGroteskRegular' !important; } /* Form */ .sqs-block-form .field-list .title { font-family: 'AlteHaasGroteskRegular' !important; } .sqs-block-form .field-list .caption-text { font-family: 'AlteHaasGroteskRegular' !important; } .sqs-block-form .field-list .description { font-family: 'AlteHaasGroteskRegular' !important; } .sqs-block-form .field-list input, .sqs-block-form .field-list input::placeholder, .sqs-block-form .field-list textarea, .sqs-block-form .field-list textarea::placeholder, .sqs-block-form .form-item select, .sqs-block-form .form-item select option, .sqs-block-form .field-list .option { font-family: 'AlteHaasGroteskRegular' !important; }

@CdVstudio Hi! You can add this code under Website > Pages > Website Tools > Custom CSS @media screen and (min-width: 1025px) { #gridThumbs { display: flex !important; flex-wrap: wrap; gap: 40px; } .grid-item { flex: 0 0 100%; } .grid-item:nth-child(2), .grid-item:nth-child(3) { flex: 0 0 calc(50% - 40px); } .grid-item:nth-child(4), .grid-item:nth-child(5), .grid-item:nth-child(6) { flex: 0 0 calc(33.333% - 40px); } }