Header Height
WordPress plugin that exposes the real sticky header height as CSS custom properties for full-height heroes, banners and layouts.
★ 2stars
0forks
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/guisfus/wp-header-height/archive/refs/heads/main.zipDeclares an update source (false), so updates arrive through the plugin's own updater.
From the readme
Header Height
Small WordPress plugin that exposes the real sticky header height as CSS custom properties, useful for full-height hero sections, banners and layouts that need to account for a fixed or sticky header.
CSS Variables
The plugin writes these variables to the root element:
Use --header-height in your theme or layout CSS.
If the configured header is not found, the plugin writes 0px so layouts do not keep a stale height from a previous state.
Default Selector
By default, the plugin measures:
Example markup:
Usage Example
Custom Header Selector
You can change the selector with a WordPress filter:
Requirements
- WordPress 5.8 or higher
- PHP 7.4 or higher
Installation
The GitHub repository uses the wp- prefix only to identify it as a WordPress plugin repository. When installing the plugin in WordPress, use the plugin folder name without the wp- prefix.
Correct plugin folder:
Correct ZIP structure:
Do not install it as:
Backend installation:
1. Create a ZIP with header-height/ as the root folder.
2. In WordPress, go to Plugins Add New Upload Plugin.
3. Upload header-height.zip.
4. Activate Header Height.
Manual installation:
1. Upload the header-height
Read the full README on GitHub →