sorca_marian

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
 

Add the below code in the Page Header Code Injection
</style> .gallery-lightbox-item-src { max-width: 70vw; } </style> 70vw represents 70% of the screen width.
The code allows a maximum 70% screen width on the images of the lightbox 

Make sure you have not enabled "express checkout"

Try adding the below code in Custom CSS
.header-burger { position : absolute; right : 0 }  

@media (max-width: 767px) { #sections > :nth-child(2) p { font-size : 12px; } } Add the below code in Custom CSS.
You can adjust the 12px to the size that you want

Just replace the first part of the code with the below one
 
.Cart-inner *:not(.sqs-cart-quantity) { visibility:hidden; }  

Just add this CSS on the page or in Custom CSS
[data-section-id="65a03c04b436517bcf7943d2"] a { display : block; } Note, if you modify the section and the ID changes, the CSS selector needs to be updated

I just got a response from support and they can book without leaving the Squarespace site

Yes, it's a hack to make it work.
As soon as it is fixed you can remove the code.

Don't forget to mark the solution here