How to Disable CSS in Squarespace Editor Mode (But Active on the Live Site)
In this tutorial, you'll learn how to disable CSS in the edit mode, but kept active on the live site. If you’ve ever added custom CSS to your Squarespace 7.1 site and then opened Editor Mode, you’ve probably experienced this:
Layout looks broken
Sections overlap
Sticky elements cover controls
Custom animations make editing difficult
The good news? You can disable your custom CSS while editing — and keep it fully active on the live site.
Table of Contents
Why this happens
When you add CSS via:
Page → Custom Code → Custom CSS
That CSS loads everywhere — including Editor Mode.
Squarespace doesn’t automatically separate:
Front-end (live visitors)
Backend (editor view)
The Smart Solution
THe mart solution is to target the live site only. Squarespace adds a special class to the <body> when you're in editing mode. We can use that to conditionally apply CSS..
Step-by-step instructions
Step 1: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below
/* Apply styles only when NOT in editor mode */
body:not(.sqs-edit-mode-active) {
/*your code goes in here*/
}
When should you use this?
This technique is especially helpful if you're using:
Sticky footers
Full-screen overlays
Scroll hijacking
Custom navigation replacements
Full viewport hero sections
Custom modals
Key Takeaways
Squarespace loads custom CSS in both live view and editor mode by default.
The
.sqs-edit-modeclass is automatically added when you're editing.Wrapping your CSS inside
body:not(.sqs-edit-mode)keeps it active on the live site only.This method prevents layout conflicts while editing.
You can selectively disable animations, positioning, overlays, or entire style groups.
FAQs
Will this affect my live website?
No. Your styles remain fully active on the live site. They are only disabled while you're in the Squarespace editor.
Does this work on Squarespace 7.1 Fluid Engine?
Yes. This works on all Squarespace 7.1 sites, including Fluid Engine.
Can I disable only certain styles instead of all CSS?
Absolutely. You can wrap specific selectors instead of your entire CSS file:
body:not(.sqs-edit-mode) .sticky-header {
position: fixed;
}
Can I disable animations only while editing?
Yes. Use:
.sqs-edit-mode * {
animation: none !important;
transition: none !important;
}
This keeps your layout intact but removes motion effects during editing.
Will this break third-party scripts?
No. This method only controls CSS. If you want to disable scripts during editing, you would need a small JavaScript condition.
How do I know if I'm in editor mode?
When editing, Squarespace automatically adds the class:
.sqs-edit-modeto the <body> element. That’s what makes this solution possible.
Conclusion
Custom CSS gives you powerful design control in Squarespace — but it can sometimes interfere with the editing experience.
By using:
body:not(.sqs-edit-mode)you create a clean separation between your live site design and your editor workspace.
This approach allows you to:
Maintain full creative freedom
Prevent layout conflicts while editing
Improve workflow efficiency
Keep your client sites stable and professional
It’s a simple fix, but one that makes a big difference in day-to-day development.
If you're building advanced layouts, sticky elements, overlays, or animation-heavy designs, this technique should be part of your standard Squarespace toolkit.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, you can book our consultation services.
