hide header and footer squarespace 7.1

2 min read 22-11-2024

Squarespace 7.1 offers a sleek and intuitive website building experience. However, sometimes you need more control over your design. This guide will show you how to hide your header and footer, opening up creative possibilities for specific pages or sections of your Squarespace 7.1 website. We'll cover several methods, from simple CSS tweaks to using advanced design features.

Why Hide Your Header and Footer?

Hiding your header and footer in Squarespace 7.1 isn't just about aesthetics. It's a powerful tool for creating unique page layouts:

Full-Screen Hero Images: Maximize the impact of stunning hero images or videos by removing header and footer distractions.
Immersive Landing Pages: Create a focused experience for users landing on a specific call-to-action page.
Unique Section Design: Design sections independent of your main website navigation and branding.
Custom Modals or Pop-ups: Enhance interactive elements without header/footer interference.

Method 1: Using CSS (Best for Experienced Users)

This method requires familiarity with CSS. It's the most flexible but also the riskiest if you're not comfortable editing code.

Steps:

Access Design Panel: Go to your Squarespace website's editor and navigate to the "Design" panel.
Open Custom CSS: Within the Design panel, click "Custom CSS."
Paste the Code: Insert the following code. This hides both the header and footer:

header {
  display: none;
}
footer {
  display: none;
}

Save Changes: Click "Save" to apply the changes.

Important Note: This code hides the header and footer site-wide. For page-specific hiding, you'll need more advanced CSS targeting specific page IDs or classes.

Method 2: Section-Based Design (Best for Beginners)

This method is more user-friendly and doesn't require code.

Steps:

Create a New Section: On the page where you want to hide the header and footer, add a new section.
Full-Width Section: Ensure the section spans the entire width of the page.
Position Your Content: Add your content—images, text, etc.—to this section.
Adjust Section Height: Make the section tall enough to fill the entire screen, minimizing the space visible above and below it.

This method essentially covers the header and footer visually, rather than removing them from the code. It's a good compromise for those who want simple control without complex code edits.

Method 3: Page-Specific Settings (Limited Control)

Squarespace offers some limited options to customize page layouts. While you can't completely remove header and footer directly from these options, you can adjust settings for specific pages. This is useful for adjusting margins, but not perfect for total removal.

Troubleshooting Tips

Inspect Element: Use your browser's "Inspect Element" tool (usually right-click -> Inspect) to find the exact CSS classes or IDs for your header and footer. This helps in creating more targeted CSS code.
Backup Your Site: Always back up your Squarespace site before making major CSS changes. This ensures you can revert to a previous version if anything goes wrong.
Squarespace Support: If you encounter issues, consult Squarespace's official help documentation or contact their support team.

Conclusion

Hiding your header and footer in Squarespace 7.1 provides a powerful way to enhance your website's visual appeal and user experience. Whether you choose the CSS method for maximum control or the section-based approach for simplicity, this guide provides the knowledge to achieve your desired design. Remember to always back up your site before making any significant changes!