sorca_marian

Hi,
 
I have a tutorial for anchor links to sections.

Make sure you are adding the right link.
For example, if the page is site.com/page and you want to link to a section there add the link /page#section
 

Something like this?
 
.course-item .course-item__side-nav-link .course-item__side-nav-thumbnail-container { background : transparent; }  

Try this CSS code
@media (max-width: 767px) { .newsletter-form-body { display : flex; justify-content : center; } .newsletter-form-button-label { display : none; } .newsletter-form-button-wrapper .newsletter-form-button-icon:before { content : "\2192"; font-size : 30px; } .newsletter-form-button-wrapper .newsletter-form-button { padding : 20px 7px 21px!important } }  

Try this code 
input[name="email"] { background : transparent!important; color : rgb(237, 191, 42); text-align : center; border : none!important; border-bottom : 1px solid rgb(237, 191, 42)!important; } input[name="email"]::placeholder { color : rgb(237, 191, 42)!important; text-align : center; text-transform : uppercase; letter-spacing:3px; }  

For the section that you have in the image, you can add the below code in the Page Header Code Injection of the homepage
 
<style> @media (max-width : 767px) { #sections > :nth-child(4) .sqs-gallery-design-grid > :last-child { display : none; } } </style>  

There is a small mistake in the code provided.

 I updated it.
<script> document.addEventListener('DOMContentLoaded', function() { document.querySelector('h1.image a').setAttribute('href', '/home'); }); </script>

Hello,

Try using /#designs
If it does not work, send me a link to your site so I can make some tests.

If you want to scroll to the next section on arrow click, use this code
<style> #sections > :first-child { position: relative; } .bottom { position: absolute; bottom: 0; width: 100%; text-align: center; } .scroll-indicator { display: inline-block; width: 24px; height: 24px; margin: 16px auto; border-right: 2px solid #FFF; border-bottom: 2px solid #FFF; border-bottom-right-radius: 2px; transform: rotate(45deg); animation: fade 2s infinite linear; } @keyframes fade { 0% { transform: rotate(45deg); opacity: 1; } 75% { transform: rotate(45deg) translateY(-6px) translateX(-6px); opacity: 0; } 100% { opacity: 0; } } /* This is optional and makes the scroll effect smooth */ html { scroll-behavior : smooth; } </style> <script> document.addEventListener('DOMContentLoaded', function() { var section = document.querySelector("#sections > :first-child") if (section) { var bottomDiv = document.createElement('div'); bottomDiv.className = 'bottom'; bottomDiv.innerHTML = ` <a class="scroll-indicator"></a> `; section.appendChild(bottomDiv); document.querySelector(".scroll-indicator").addEventListener("click", function(event) { event.target.closest("section").nextElementSibling.scrollIntoView(); }); } }); </script>

Add the below code in Custom CSS
.header-menu-nav-folder--active+div { transform: translatex(0); } .header-menu-nav-folder--active, .header-menu-controls { display : none; }  

You can remove it.
It looks like a broken URL in the script tag.
You can save it in a text file locally just in case.

I think it opens your default Mailing software

Updated
.header-display-desktop .header-title-nav-wrapper .header-nav-list { display: flex; flex-direction : column; align-items: baseline; } .header-display-desktop .header-nav { flex: 0; } .header-display-desktop .header-nav, .header-display-desktop .header-actions--right { flex-direction : column; width: auto; } .header-display-desktop .header-actions-action--social { order : -2; } .header-display-desktop .header-actions-action--cta { order : -1; margin-top : 5px; margin-bottom : 5px; }  

You can update the margin from below
<style> @media (max-width: 767px) { .restrict-width-1000 { margin-top : 30px!important; } .lock-screen h1 { font-size : 40px!important } .lock-screen p { font-size : 15px!important } } </style>  

Hi,
Add the below code in Custom CSS below all existing code
@media (max-width: 767px) { .header-title-nav-wrapper { flex-basis : calc(100% - 75px - 75px)!important; } }  

Hello,
Add the below CSS in Custom CSS
.list-item-content__button-container { max-width : 100%!important; }  

Can you add a link to your site?

For the hamburger to display on the right, use the below CSS code
.header-burger { order : 2; }  

You can use a CSS media query to only display it on larger screens

 
@media (min-width: 768px) { /* Your code here */ }  

I see a loading error for the .svg file.
Can. you try using .png?

Sure
.sqs-svg-icon--wrapper::before { color : #fff; } .sqs-svg-icon--wrapper:hover::before { color : #d6b600; } .social-icons-color-white.social-icons-style-regular .sqs-svg-icon--list:hover [href*="wa.me"] { opacity : 0.4; } .social-icons-color-white.social-icons-style-regular .sqs-svg-icon--list [href*="wa.me"]:hover { opacity : 1; }  
hover 2.mp4

Add the below code in Custom CSS, at the bottom, below all existing code
.header-title { flex-grow: 20; } .header-title-logo { display : flex; align-items : center; } .header-title-logo a { flex-basis : 227px; flex-shrink: 0; } .header-title-logo::after { width: 100%; padding : 0!important; text-align : center; } @media (max-width: 767px) { .header-title-logo::after { display: none; } }  

Add the below code in the Page header code injection of the homepage.
Upload your logo and add the url(LINK TO YOUR LOGO)
<style> #sections > :first-child .content::after { content:""; width: 100vh; height: 25vh; z-index: 9999; top: 50%; left: 50%; background: url(https://images.squarespace-cdn.com/content/6429afef9d28c96ab5cab093/be66b182-e373-4150-88ac-0e45d062a3c5/Asset+18.png) no-repeat; background-size: contain; transform: translate(-50%,-50%); position: fixed } @media (max-width: 1100px) { #sections > :first-child .content::after { width : 70vw; } } </style>  

Great
 
<style> button[type="submit"] { background : transparent!important; border : 1px solid #000; border-radius : 5px; border-width : 1px!important; } button[type="submit"] .form-submit-button-label { color : #000!important; } button[type="submit"]:hover { background : #000!important; } button[type="submit"]:hover .form-submit-button-label { color : #fff!important; } </style>  

Hi,
Add the below code in the Blog page settings -> Advanced -> Post Blog Item Code Injection
 
<style> @media (min-width: 767px) { .sqs-block-summary-v2 { position: relative; width: 90vw; left: -17vw; } .summary-item-list { display : flex!important; gap : 20px; } .summary-item-list > * { width : 32%!important; margin : 0!important; padding : 0!important; } } </style>  

On the new Localized Forms, Squarespace is using React.js and that's why you don't see regular input changes with JavaScript.

I have 2 videos about this and here are the source codes: https://github.com/sorcamarian/squarespace-tricks/tree/main/Forms