What Happened to My Page Header After Switching Squarespace Templates?

What Happens to the Header When You Switch Templates

Logo Placement Changes

Each 7.0 template positions the logo differently - left-aligned, centered, right-aligned, or stacked above navigation. Your logo image file transfers to the new template, but its position and size may change based on the new template's default header layout. You may need to re-upload or resize your logo to fit the new header configuration.

Navigation Style Changes

Navigation menu items (the pages in your main navigation) carry over - the pages themselves do not change. But how those items display changes: horizontal vs. vertical menu, dropdown behavior, font styling, spacing, and hover effects all depend on the new template's navigation design. For navigation reconfiguration, our guide to editing the navigation bar covers structure and styling on different templates.

Header Layout Options Differ

Some templates offer header layout choices (logo left/nav right, centered, stacked). Others have a fixed header layout with no options. If your old template had a header layout you relied on and the new template does not offer it, you may need Custom CSS to recreate it. For CSS header customization, our guide to Squarespace custom CSS covers header-specific selectors.

Custom CSS for the Header Stops Working

Custom CSS that styled your old header uses class names specific to that template. The new template has different class names for header elements. Your CSS rules remain in the Custom CSS editor but no longer target the correct elements. You need to inspect the new template's header HTML and update your CSS selectors.

How to Reconfigure Your Header After Switching

Step 1: Check Header Settings

On 7.0, header settings are usually in Design > Site Styles. Look for header-related options - layout, logo height, navigation alignment, sticky behavior, and transparency. Configure these first before adding custom CSS. For header settings, our guide to fixing header editing issues covers finding and using the correct settings.

Step 2: Re-Upload or Resize Your Logo

If the logo looks too large, too small, or mispositioned, check the logo settings in the header configuration. Adjust the logo height slider. If the logo file itself needs to be different for the new header layout, re-upload a version optimized for the new placement.

Step 3: Configure Navigation

Verify all navigation items are present and in the correct order. Check dropdown menus - child pages may need to be re-indented in the Pages panel. Test mobile navigation - the hamburger menu behavior changes between templates.

Step 4: Update Custom CSS

Inspect the new template's header elements using browser DevTools (right-click > Inspect). Note the new class names for the header container, navigation links, logo, and any other elements you previously styled. Update your Custom CSS with the new selectors. For CSS migration, our guide to adding custom CSS to Squarespace covers finding and targeting elements.

Step 5: Test on Mobile

The mobile header changes significantly between templates. Check that the hamburger menu opens, all navigation items are visible, the logo displays correctly, and the header does not overlap page content on small screens. For mobile fixes, our guide to Squarespace mobile optimization covers responsive header behavior.

Common Header Issues After Template Switch

Header Missing Entirely

If the header disappears after switching, the new template may not include a default header for certain page types, or Custom CSS may be hiding it. Check for CSS rules with display: none targeting header elements. Remove or update conflicting rules.

Header Overlapping Content

If the header overlaps your page content, the new template may use a fixed or absolute positioned header without corresponding body padding. Add CSS: body { padding-top: 80px; } (adjust the value to match your header height).

Social Icons Disappeared from Header

Social icon display in the header is template-dependent. The new template may not show social icons in the same location. Check the header settings and Social Links settings (Settings > Social Links). Some templates display social icons in the footer instead of the header.

Search Icon Missing

Not all 7.0 templates include a search icon in the header. If the new template does not support header search, you can add a Search Block to a page or use Custom CSS to add a search icon. For design strategies, our Squarespace design tips guide covers header design principles. For broader template switching guidance, our guide to changing templates on Squarespace covers the complete process. For content preservation, our guide to content carry-over after switching covers what transfers.

Preventing Header Issues

Preview before switching. Use the template preview (Design > Template > Preview) to check how your header looks in the new template before committing.

Document your current header. Screenshot your header on desktop and mobile. Note the logo size, navigation layout, and any custom styling. This reference guides your reconfiguration.

Budget time for reconfiguration. The header appears on every page - getting it right affects your entire site. Allow 30 to 60 minutes for header reconfiguration after a template switch.

Reconfigure, Do Not Panic

Your header changing after a template switch is expected - not a bug. Each template handles headers differently, and the new template applies its own defaults. The fix is reconfiguration: set up the header in the new template's settings, update your Custom CSS selectors, and test on both desktop and mobile.

Document your header before switching, preview the new template first, and budget time for reconfiguration. The header affects every page - getting it right is worth the effort.