Dynamic Header Spacer System

A WordPress plugin that automatically inserts a dynamic spacer to prevent sticky headers and top bars from overlapping site content.

Built to solve a common layout problem in WordPress theme development — sticky headers, transparent headers, and injected top bars frequently cause content overlap that can't be cleanly fixed with static CSS alone. This plugin calculates the correct spacing dynamically and adjusts on resize, scroll, and orientation change.

Features

• Automatically calculates header and top bar height and inserts a matching spacer
• Detects whether the top bar is inside or outside the header to prevent double spacing
• Supports opaque, transparent, semi-transparent, and non-sticky header types
• Transparency Breakpoint setting for headers that switch behavior at a custom viewport width
• Custom Content Container Selector for themes that don't use #site-content
• Custom Top Bar Selector for themes using non-standard top bar IDs
• Mobile Top Bar support for themes using separate mobile page templates with different selectors
• "Push Header Down" feature for themes where both the top bar and header use position: fixed
• Hide spacer below a custom breakpoint for mobile/hamburger layouts
• Manual height override for edge cases
• Admin toggles to strip theme-applied padding-top or margin-top from content containers
• Custom CSS field for front-end style injection without editing theme files
• Built-in FAQ documentation in the admin settings panel

Installation

1. Download or clone this repository
2. Upload the dynamic-header-spacer-system folder to /wp-content/plugins/
3. Activate the plugin through the Plugins screen in WordPress
4. Navigate to Settings > Dynamic Header Spacer System to configure

Usage

Select your header type, toggle top bar support if needed, and enable the spacer system. The plugin handles height calculation automatically. Use the FAQ section in the settings panel for guidance on less common configurations.

For themes with fixed top bars and fixed headers stacking incorrectly, enable Push Header Down by Top Bar Height. For themes that go transparent on desktop and opaque on mobile, set the Transparency Breakpoint to match your theme's hamburger breakpoint.

Requirements

• WordPress 6.0 or later
• No additional dependencies

Case Study

This plugin was developed to solve a recurring layout problem across multiple production WordPress builds. A full write-up covering the problem, approach, and production results is available in my portfolio:

View the case study at krisowensdev.com

License

Licensed under the GPLv2 or later.