hide header code squarespace

2 min read 16-10-2024

If you're using Squarespace for your website and want to customize your layout, you may find that you want to hide the header section for various reasons—such as creating a more streamlined look or focusing attention on specific content. In this article, we'll guide you through the process of hiding the header code in Squarespace.

Understanding the Header in Squarespace

The header is a critical part of your website's design; it typically contains your site title, navigation links, and other elements that help visitors navigate your site. However, there are instances where you may prefer to hide this section.

Reasons to Hide the Header

Minimalist Design: For a clean, distraction-free look.
Landing Pages: Focusing on specific calls to action without menu distractions.
Unique Layouts: Customizing individual pages with different design elements.

Hiding the Header in Squarespace

Follow these steps to hide your header in Squarespace:

Step 1: Access the Code Injection

Log in to your Squarespace account.
Navigate to the Home Menu, and click on Settings.
In the Settings panel, click on Advanced.
Select Code Injection.

Step 2: Add Custom CSS

To hide the header, you will need to add a piece of custom CSS code.

In the Header section of Code Injection, you can add the following CSS:
```
header {
    display: none;
}
```
This code will effectively hide the entire header area across your website.

Step 3: Customize as Needed

If you only want to hide the header on specific pages, you might consider using page-specific CSS. To do this:

Go to the page you want to customize.
Click on the Settings gear icon.
Scroll down to Advanced and add a unique CSS class in the Page Header Code Injection. For example, use:
```
<style>
    .your-custom-class header {
        display: none;
    }
</style>
```
Replace .your-custom-class with the actual class or ID that corresponds to that specific page.

Step 4: Save Your Changes

After adding the code, make sure to save your changes. Refresh your website to see the effect of hiding the header.

Tips for Maintaining Usability

While hiding the header can improve aesthetics, ensure that your website remains user-friendly. Consider these tips:

Navigation Alternatives: If you remove navigation links, ensure there are other ways for users to navigate your site.
Branding: Keep your logo or brand elements accessible elsewhere on the page if they are part of your header.
Responsive Design: Test your design on various devices to ensure the user experience remains intact.

Conclusion

Hiding the header in Squarespace can provide a cleaner, more focused design for your website. By following the steps outlined above, you can easily remove or customize the header according to your needs. Always remember to prioritize user experience alongside design aesthetics. Happy designing!