Squarespace Edit Site Header Not Working

Header Edit Interface Not Appearing

Clicking the Wrong Area (7.1)

On Squarespace 7.1, the header editing interface appears when you hover over and click the header area at the top of the page editor. A pencil icon appears - click it to open header settings. If you click on a section below the header instead, you get section settings, not header settings. Make sure you are clicking the narrow header strip at the very top of the page - above the first content section.

Editor Not Loading Properly

If the header edit panel does not open when you click, the editor may have a loading issue. Refresh the page editor (Ctrl+R or Cmd+R). Clear browser cache. Try in incognito mode. Disable browser extensions that may interfere with the editor interface. Chrome provides the best editor compatibility. For editor troubleshooting, our guide to fixing Squarespace glitches covers browser-related issues.

7.0 Template Limitations

On Squarespace 7.0, header editing options vary by template. Some templates have limited header customization. If you cannot find a specific header setting, your 7.0 template may not expose it. Use Custom CSS to modify header elements that your template's settings do not include. For version identification, our guide to checking your Squarespace version covers how to determine your version.

Header Changes Not Saving or Not Appearing

Browser Cache

Header styling changes may not appear because your browser is serving the cached old version. Clear cache and test in incognito. If changes appear in incognito but not your regular browser, caching is the cause.

Custom CSS Overriding Header Styles

Custom CSS rules that target header elements (navigation links, logo, background) override the header settings you configure in the visual editor. If you change the header color in settings but it stays the old color, check Design > Custom CSS for rules targeting .header, .header-nav, or similar selectors. Remove or update the conflicting CSS. For CSS debugging, our guide to Squarespace custom CSS covers specificity and troubleshooting.

Section-Specific Header Overrides

On 7.1, individual page sections can override the header's appearance - setting the header to transparent or changing its color for specific sections. If the header looks different on one page than another, check the first section's settings on the affected page. Look for header appearance options (transparent, solid, contrast) in the section settings.

Common Header Editing Tasks and Fixes

Changing the Logo

Click the header area > click the logo placeholder or pencil icon > upload your logo image. Use a PNG with transparent background for best results. If the logo appears too large or too small, adjust the logo height slider in header settings. If the logo displays incorrectly, check Custom CSS for rules that set width or height on the logo element.

Changing Header Layout

On 7.1, click the header area > open header settings > choose a layout option (logo left/nav right, centered, split nav, etc.). If the layout option you want does not appear, your template version may not support it. 7.1 offers more layout options than 7.0.

Making the Header Sticky

In header settings, look for "Fixed Position" or "Sticky" option and enable it. If the option does not appear, your template may not support sticky headers natively. You can add sticky behavior with Custom CSS: header { position: sticky; top: 0; z-index: 999; }. For navigation customization, our guide to editing the navigation bar covers header layout and sticky configuration.

Making the Header Transparent

On 7.1, click the first section of a page, open section settings, and look for header appearance options. Set to "Transparent" for the header to overlay the section content. If the option does not appear, your section type or template may not support transparent headers.

Header Not Displaying Correctly

Header Overlapping Content

If the header overlaps your page content (covering text or images), the header may be set to a fixed or absolute position without corresponding padding on the page body. Add padding-top to the first section that matches your header height: .page-section:first-child { padding-top: 100px; }. Adjust the pixel value to match your actual header height.

Header Looking Different on Mobile

The mobile header automatically transforms into a hamburger menu. If the mobile header looks wrong, check Custom CSS for header rules without mobile media queries. The mobile header has different class names and structure than the desktop header. For mobile header fixes, our guide to Squarespace mobile optimization covers responsive navigation.

Social Icons Not Appearing in Header

Social icons in the header are configured separately from the header layout. Go to Settings > Social Links and add your social profile URLs. Then in header settings, enable social icon display. If icons still do not appear, check Custom CSS for rules that hide social elements. For design strategies, our Squarespace design tips guide covers header design principles.

Troubleshooting Process

1. Click the correct area. Hover over the header strip at the top of the editor - look for the pencil icon.

2. Refresh the editor. Close and reopen the page editor. Clear browser cache.

3. Test in incognito. Rule out caching and extension interference.

4. Check Custom CSS. Look for rules targeting header, navigation, or logo elements.

5. Check section settings. On 7.1, section-level header overrides (transparent, contrast) may affect the header appearance on specific pages.

6. Check your version. 7.0 and 7.1 have different header editing methods and options. For broader customization, our guide to customizing your Squarespace website covers the full header configuration workflow. For CSS techniques, our guide to adding custom CSS to Squarespace covers header-specific selectors.

Get Your Header Editing Working

Header editing on Squarespace works through a specific interface - clicking the header area in the editor on 7.1 or using Site Styles on 7.0. When changes do not appear, caching and Custom CSS are the most common blockers. When the editor does not respond, browser issues are the cause.

Click the right area, clear cache when changes are invisible, check CSS for overrides, and test on mobile. Your header affects every page - getting it right is worth the troubleshooting effort.