wordpress-code-library

Header Scroll Logo Swap

A reusable WordPress header component that switches between coordinated dark and light visual states as the page scrolls.

The component is builder-independent. The core CSS and JavaScript are stored once. Integration guides explain how to add the same files to WordPress and visual builders.

Live Preview

View the Header Scroll Logo Swap demo

Demo content

The included example uses:

• About
• Services
• Blog
• Contact
• Start Now CTA

Visual system

The supplied logo files use two matching background colors:

--wpcl-header-dark: #313737;
--wpcl-header-light: #f1ece6;

• cube-logo-dark-bg.jpg is used on the initial dark header.
• cube-logo-light-bg.jpg is used on the light scrolled header.

Because the supplied assets are JPG files with solid backgrounds, the header backgrounds should match these values to reduce visible edges around the images.

Features

• dark initial header
• light header after scrolling
• coordinated logo swap
• menu color transition
• inverted CTA treatment
• responsive mobile menu
• accessible menu toggle
• Escape-key support
• menu closes after selecting a mobile link
• WordPress admin bar offset
• reduced-motion support
• no external JavaScript dependencies

Files

header-scroll-logo-swap/
├── README.md
├── CHANGELOG.md
├── styles.css
├── script.js
├── assets/
│   ├── README.md
│   ├── cube-logo-dark-bg.jpg
│   └── cube-logo-light-bg.jpg
├── examples/
│   ├── README.md
│   ├── index.html
│   └── example.css
└── integrations/
    ├── README.md
    ├── child-theme.md
    └── bricks.md

Core classes

wpcl-header
wpcl-header__inner
wpcl-header__logo
wpcl-header__logo-image
wpcl-header__logo-image--dark-bg
wpcl-header__logo-image--light-bg
wpcl-header__toggle
wpcl-header__nav
wpcl-header__menu
wpcl-header__cta

State classes

JavaScript adds these state classes:

is-scrolled
is-menu-open

The script also adds wpcl-menu-open to the body element while the mobile navigation is open.

Basic installation

1. Add styles.css to the website.
2. Add script.js in the footer.
3. Recreate the class structure shown in examples/index.html.
4. Upload both logo assets.
5. update the image paths for the website.
6. Clear builder, WordPress, hosting, and CDN caches.
7. Test desktop, tablet, mobile, keyboard navigation, and the WordPress admin bar.

Builder support

The core component does not depend on a specific builder.

The integrations folder documents how to add the files and classes in different WordPress setups. Builder-specific guides should be added only after the component has been tested in that builder.

Change documentation

Every repository change should include:

1. a clear commit summary
2. an optional commit description explaining why the file changed
3. a matching entry in CHANGELOG.md when behavior, design, structure, or installation changes

This keeps the component history easy to understand.

This site is open source. Improve this page.