Removing the navigation menu from a page

This tutorial shows you how to remove the navigational menu from a page.

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 (https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff) which I fully recommend.


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


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

Go to Design > 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;} }

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, express 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.

Primitus Consultancy

We work with small and medium-sized businesses to help create a professional online presence. We provide a one shop full-service design studio in London, United Kingdom. 

https://primitusconsultancy.co.uk
Previous
Previous

How to customize your squarespace forms with CSS

Next
Next

Removing the logo from a page