How Do I Hide the Navigation Bar in Squarespace?

Hiding the navigation bar in Squarespace can be useful for designing landing pages, portfolios, or other sections of your website where you want a minimalist look. Although Squarespace doesn't offer a built-in feature to directly hide the navigation bar, you can achieve this through custom CSS. Below are step-by-step instructions for different Squarespace versions.

Steps for Hiding the Navigation Bar in Squarespace 7.1 and 7.0:

1. Accessing the Custom CSS Editor:

1. Log in to your Squarespace account and navigate to the website where you want to hide the navigation bar.
2. Go to the Home Menu and select Design.
3. Click on Custom CSS.

2. Adding Custom CSS:

1. In the Custom CSS window, you can add CSS code to hide the navigation bar. Here's the basic code you can use:

css /* Hide the main navigation bar */ .header-nav { display: none; }

1. If you're targeting a specific page, you can use a unique page ID. Each page in Squarespace has a unique identifier, which you can find in the page's URL when you are in edit mode. For example: https://yoursite.squarespace.com/config/pages/unique-page-id Using hidden page id, the CSS would look like this:

css /* Hide the main navigation bar on a specific page */ .page-id-unique-page-id .header-nav { display: none; }

3. Saving Your Changes:

1. After adding the desired CSS, click Save to apply the changes.
2. Refresh your website to ensure the navigation bar is hidden.

Additional Considerations:

• Template Variations: Different templates in Squarespace may use different classes or IDs for navigation elements. If .header-nav doesn't work, inspect the site elements (using browser developer tools) to identify the correct class or ID.

• Mobile Navigation: Ensure you check both desktop and mobile versions of your site. Sometimes, hiding the navigation on the desktop version might not affect the mobile version. You might need to add additional CSS rules for mobile, such as: css /* Hide the navigation bar on mobile */ .mobile-nav .header-nav { display: none; }

• Scope of Changes: When targeting multiple pages or specific sections, remember to test across all affected areas to ensure the styling works as intended and doesn’t introduce layout issues.

Using Code Injection (Optional):

For more advanced users, you can also use the Code Injection feature available in Squarespace Business or Commerce plans: 1. Navigate to Code Injection: Go to Settings > Advanced > Code Injection. 2. Add Your CSS: Under the appropriate section (Header or Footer), add your CSS code, wrapped inside <style> tags: ```html

``` 3. Save Changes: Click Save to apply your injected code.

Limitations and Considerations:

• Feature Limitations: Free or personal plans may not have access to certain advanced customization options such as Code Injection.
• SEO and Usability: Hiding the navigation bar can impact the user experience and SEO, as users might find it harder to navigate your site.
• Backup: Always backup your custom CSS and site details before making significant changes.

By following these steps, you should be able to effectively hide the navigation bar in Squarespace, allowing you to create a cleaner, more focused page that meets your design goals.