Removing the navigation menu from a specific page in Squarespace 7.1

There may be times when you want to remove the top navigation menu from a particular page on your Squarespace website — for example, to create a distraction-free landing page, a custom coming-soon screen, or a dedicated thank-you page after checkout.

Squarespace doesn’t offer a built-in option to hide navigation on individual pages, but with a simple custom CSS solution, it’s possible to hide the header navigation on any page you choose.

Table of Contents

• Why Remove the Navigation Menu on a Page

• Step-by-Step Instructions

• Key Takeaways

• FAQs

• Conclusion

Why Remove the Navigation Menu on a Page?

• To create a clean, focused landing page

• For marketing or ad campaign pages with fewer distractions

• On custom thank-you or confirmation pages

• For minimalist portfolios or welcome screens

Complexity: Easy

A useful tool you can use to identify the #collection-id, #block-id and section[data-section-id="xxxxx"] is a Chrome Extension called Squarespace ID Finder.

---

Step-by-Step Instructions

Step 1. Identify the page collection you want the navigation removed.

Use the chrome extension mentioned earlier. In this example the page collection id is #collection-61803842197c3a5a511e27c9

---

Step 2. Add the CSS code to your website, with the page collection id.

Go to Pages > Custom Code > Custom CSS and add the code below.

/* remove main navigation */
#collection-61803842197c3a5a511e27c9  {
  .header-nav-list>div {
   visibility: hidden;
}
 // Mobile menu
  .header-menu-nav-list {
  visibility: hidden;} 
}

---

Key Takeaways

• Squarespace doesn't let you hide navigation on individual pages by default — but custom CSS fixes that.

• You can easily target specific pages using their page ID.

• Ideal for landing pages, thank-you pages, and custom campaigns.

• Navigation stays intact on all other pages.

FAQs

Will this affect mobile view?
Yes, the CSS applies site-wide, including mobile.

Can I still access the page in the menu?
Yes, the page still exists and is accessible — this only affects the visual display of the navigation.

Can I hide the navigation menu on multiple pages?
Yes! Just add multiple selectors like this:

#collection-123456789, #collection-987654321 { .header-nav-list>div { visibility: hidden; } // Mobile menu .header-menu-nav-list { visibility: hidden;} }

---

---

Conclusion

Hiding the navigation menu on specific Squarespace pages allows you to build focused, distraction-free layouts for marketing, promotions, or special content. By using simple CSS, you can gain better control over your design — all while maintaining a professional user experience.

---

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.