- You’ll build
- Luxury Minimalist Static Header to WordPress
- Code required
- HTML + CSS + JS
- Installation
- Theme and role dependent
On this page
Before you startHow the header worksReplace the actual block-theme headerClassic themes and ElementorCustomize the restrained styleTroubleshoot static positioningAccessibility and mobileFrequently asked questionsCheck your installationComplete working code
The preview and download are generated from these same source files. The complete snippet requires permission to save inline styles and scripts.
<header class="iljs-demo iljs-header-minimal" data-iljs-header><a class="iljs-header-brand" href="#iljs-home">ATELIER</a><button class="iljs-header-toggle" type="button" aria-expanded="false" aria-controls="iljs-minimal-nav">Menu</button><nav id="iljs-minimal-nav" aria-label="Example primary navigation"><a href="#iljs-work">Collection</a><a href="#iljs-about">About</a><a class="iljs-header-cta" href="#iljs-contact">Get in touch</a></nav></header>
/* Change the values here, keeping the iljs- prefix to avoid theme conflicts. */
.iljs-demo { --iljs-accent:#9235f6; --iljs-radius:18px; font-family:system-ui,sans-serif; color:#242038; width:min(620px,100%); margin:auto; }
.iljs-demo button,.iljs-demo a { font:inherit; }
.iljs-demo button:focus-visible,.iljs-demo a:focus-visible,.iljs-demo input:focus-visible,.iljs-demo summary:focus-visible { outline:3px solid #c491ff; outline-offset:4px; }
.iljs-header-minimal { --iljs-header-height:78px;--iljs-admin-offset:0px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 26px;min-height:var(--iljs-header-height);box-sizing:border-box;z-index:20; }
.iljs-header-minimal .iljs-header-brand { font-weight:700;font-size:23px;text-decoration:none; }
.iljs-header-minimal nav { display:flex;gap:22px;align-items:center; }
.iljs-header-minimal nav a { text-decoration:none;font-size:12px; }
.iljs-header-minimal .iljs-header-toggle { display:none;border:1px solid currentColor;border-radius:6px;padding:8px 12px;background:transparent;color:inherit;cursor:pointer; }
@media(max-width:600px){.iljs-header-minimal{flex-wrap:wrap;padding:18px}.iljs-header-minimal .iljs-header-toggle{display:block}.iljs-header-minimal nav{flex-direction:column;align-items:stretch;flex-basis:100%;padding:15px 0}.iljs-header-minimal[data-iljs-ready] nav{display:none}.iljs-header-minimal[data-iljs-ready][data-open="true"] nav{display:flex}}
@media(prefers-reduced-motion:reduce){.iljs-header-minimal,.iljs-header-minimal nav a{transition:none;animation:none}}
/* Static: this header scrolls with the document; it is not sticky or fixed. */
.iljs-header-minimal { position:static;background:#f9f7f1;border-top:1px solid #b5aa90;border-bottom:1px solid #b5aa90;max-width:none;color:#4d493c; }
.iljs-header-minimal .iljs-header-brand { font-family:Georgia,serif;letter-spacing:4px;font-size:21px; }
.iljs-header-minimal nav a { text-transform:uppercase;letter-spacing:1.3px;font-size:10px; }
.iljs-header-minimal .iljs-header-cta { border-bottom:1px solid #a99870;padding-bottom:4px; }
(() => {
const init=()=>document.querySelectorAll('[data-iljs-header]').forEach(root=>{
if(root.dataset.iljsReady)return;root.dataset.iljsReady='true';const toggle=root.querySelector('.iljs-header-toggle');const nav=root.querySelector('nav');
const setOpen=open=>{root.dataset.open=String(open);toggle.setAttribute('aria-expanded',String(open));};
toggle.addEventListener('click',()=>setOpen(root.dataset.open!=='true'));
root.addEventListener('keydown',event=>{if(event.key==='Escape'&&root.dataset.open==='true'){setOpen(false);toggle.focus();}});
nav.addEventListener('click',event=>{if(event.target.closest('a'))setOpen(false);});
document.addEventListener('click',event=>{if(!root.contains(event.target))setOpen(false);});
window.matchMedia('(min-width:601px)').addEventListener('change',()=>setOpen(false));
});document.readyState==='loading'?document.addEventListener('DOMContentLoaded',init,{once:true}):init();
})();
<header class="iljs-demo iljs-header-minimal" data-iljs-header><a class="iljs-header-brand" href="#iljs-home">ATELIER</a><button class="iljs-header-toggle" type="button" aria-expanded="false" aria-controls="iljs-minimal-nav">Menu</button><nav id="iljs-minimal-nav" aria-label="Example primary navigation"><a href="#iljs-work">Collection</a><a href="#iljs-about">About</a><a class="iljs-header-cta" href="#iljs-contact">Get in touch</a></nav></header>
<style>
/* Change the values here, keeping the iljs- prefix to avoid theme conflicts. */
.iljs-demo { --iljs-accent:#9235f6; --iljs-radius:18px; font-family:system-ui,sans-serif; color:#242038; width:min(620px,100%); margin:auto; }
.iljs-demo button,.iljs-demo a { font:inherit; }
.iljs-demo button:focus-visible,.iljs-demo a:focus-visible,.iljs-demo input:focus-visible,.iljs-demo summary:focus-visible { outline:3px solid #c491ff; outline-offset:4px; }
.iljs-header-minimal { --iljs-header-height:78px;--iljs-admin-offset:0px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 26px;min-height:var(--iljs-header-height);box-sizing:border-box;z-index:20; }
.iljs-header-minimal .iljs-header-brand { font-weight:700;font-size:23px;text-decoration:none; }
.iljs-header-minimal nav { display:flex;gap:22px;align-items:center; }
.iljs-header-minimal nav a { text-decoration:none;font-size:12px; }
.iljs-header-minimal .iljs-header-toggle { display:none;border:1px solid currentColor;border-radius:6px;padding:8px 12px;background:transparent;color:inherit;cursor:pointer; }
@media(max-width:600px){.iljs-header-minimal{flex-wrap:wrap;padding:18px}.iljs-header-minimal .iljs-header-toggle{display:block}.iljs-header-minimal nav{flex-direction:column;align-items:stretch;flex-basis:100%;padding:15px 0}.iljs-header-minimal[data-iljs-ready] nav{display:none}.iljs-header-minimal[data-iljs-ready][data-open="true"] nav{display:flex}}
@media(prefers-reduced-motion:reduce){.iljs-header-minimal,.iljs-header-minimal nav a{transition:none;animation:none}}
/* Static: this header scrolls with the document; it is not sticky or fixed. */
.iljs-header-minimal { position:static;background:#f9f7f1;border-top:1px solid #b5aa90;border-bottom:1px solid #b5aa90;max-width:none;color:#4d493c; }
.iljs-header-minimal .iljs-header-brand { font-family:Georgia,serif;letter-spacing:4px;font-size:21px; }
.iljs-header-minimal nav a { text-transform:uppercase;letter-spacing:1.3px;font-size:10px; }
.iljs-header-minimal .iljs-header-cta { border-bottom:1px solid #a99870;padding-bottom:4px; }
</style>
<script>
(() => {
const init=()=>document.querySelectorAll('[data-iljs-header]').forEach(root=>{
if(root.dataset.iljsReady)return;root.dataset.iljsReady='true';const toggle=root.querySelector('.iljs-header-toggle');const nav=root.querySelector('nav');
const setOpen=open=>{root.dataset.open=String(open);toggle.setAttribute('aria-expanded',String(open));};
toggle.addEventListener('click',()=>setOpen(root.dataset.open!=='true'));
root.addEventListener('keydown',event=>{if(event.key==='Escape'&&root.dataset.open==='true'){setOpen(false);toggle.focus();}});
nav.addEventListener('click',event=>{if(event.target.closest('a'))setOpen(false);});
document.addEventListener('click',event=>{if(!root.contains(event.target))setOpen(false);});
window.matchMedia('(min-width:601px)').addEventListener('change',()=>setOpen(false));
});document.readyState==='loading'?document.addEventListener('DOMContentLoaded',init,{once:true}):init();
})();
</script>Before you start
Static and transparent mean different things. Static describes normal-flow positioning rather than sticky or fixed placement. Transparent describes the background surface. This example is static with a solid light background. Read how to make a WordPress header static if you are undoing your theme’s existing sticky behavior instead of replacing its entire layout.
How the header works
The .iljs-header-minimal element contains a brand link, a mobile toggle, and a semantic navigation landmark. Its position: static declaration expresses the intended scrolling behavior. A minimum height and flexible padding let the content expand when labels wrap, rather than clipping it into a rigid bar.
The text brand uses Georgia within the snippet as a purposeful serif treatment. The navigation uses a small uppercase label style with letter spacing. Thin top and bottom borders provide structure without a floating shadow or animated background. No automatic visual animation is present.
The mobile script uses the same reliable disclosure principles as the responsive menu component: explicit expanded state, scoped queries, guarded initialization, Escape closing, and an outside-click handler. Before JavaScript initializes, links remain visible on narrow screens. The closed state is an enhancement rather than an obstacle to basic navigation.
Replace the actual block-theme header
- Make a staging backup or export before changing global templates. Confirm that your active theme is a block theme and that you can access Appearance → Editor.
- Find the Header template part. Inspect which templates use it, including the home page, individual posts, pages, and any custom layouts.
- Edit that part’s content. Replace the old inner header layout instead of inserting the new fragment below it. A page-level Custom HTML block does not replace global navigation.
- Use a Custom HTML block for the snippet markup, or the provided
block-header.htmlserialization when editing the part’s code. The wrapper does not install CSS or scripts by itself. - Install the CSS and JavaScript through an approved site-wide method, such as a child-theme enqueue. WordPress 7.0’s editor panels require appropriate capabilities and are not guaranteed for every account or template-editing screen.
- Save the part and inspect the front end on several templates. Scroll each page to confirm that the header moves away normally rather than remaining at the viewport edge.
The block-theme header replacement guide describes template references, saved customizations, and rollback. The downloadable fragment is a valid Custom HTML block wrapper, but an actual WordPress theme import and role-permission test have not been performed for this repository. Verify those integration steps on staging before using it on a live site.
Classic themes and Elementor
A classic theme can use the design through its documented header hook or an appropriate child-theme override. The snippet is not a replacement document shell. Preserve theme structure and critical WordPress hooks, including wp_head and wp_body_open. Do not overwrite a parent theme file with this HTML; updates and missing hooks could break the site. The classic header guide explains the safer integration boundary.
An Elementor replacement requires the applicable Theme Builder header feature and correct display conditions. Place the component inside that genuine global template, install its stylesheet and script, and confirm the original theme header does not render a second time. An HTML widget on a page only adds content there. The Elementor setup guide describes this distinction.
The menu anchors are static examples. Replace Collection, About, and Get in touch with real labels and destinations. They do not automatically synchronize with a WordPress Navigation block or dashboard menu. Dynamic integration is a separate adaptation, not a hidden feature of this browser snippet.
Customize the restrained style
| Item | Source location | What changes |
|---|---|---|
| Site identity | Brand anchor | Text or image logo and home URL |
| Menu labels | Navigation anchors | Visitor destinations |
| Header height | --iljs-header-height |
Minimum vertical size |
| Surface | Root background | Warm solid canvas |
| Rules | Root borders | Thin editorial framing |
| Wordmark | Brand font and spacing | Serif identity treatment |
| CTA underline | .iljs-header-cta |
Quiet action emphasis |
| Mobile threshold | CSS and matchMedia | Disclosure breakpoint |
Keep long labels readable rather than increasing letter spacing without limit. The current brand uses ATELIER as demonstration text; replace it with your own identity. If you use an image, include an appropriate alternative and its intrinsic dimensions. Change the scoped font-family to your theme’s chosen family when desired.
There is no animation speed to adjust because this design intentionally avoids visual motion. Reduced-motion rules still protect against any inherited transitions on the root or links. The glassmorphism header is a distinct option when a translucent sticky surface fits your page better.
Troubleshoot static positioning
The new header remains sticky. Its ancestor, theme wrapper, or builder section may still be sticky or fixed. Changing the child header to static cannot undo its parent’s positioning. Inspect the wrapper and disable the relevant theme or builder feature.
There is a large empty gap above the content. The old sticky or fixed header may have left a spacer, minimum height, or JavaScript-managed offset. Remove that through the original feature’s configuration before adding arbitrary negative margins.
Two navigation bars appear. The old global header is still active. Replace the actual template part or correctly configure the builder’s global header conditions.
The mobile toggle has no effect. Verify the saved script, unique menu ID, and root data attributes. If scripting failed, links should remain visible as the fallback; a customization may have hidden them unconditionally.
An update restores the old design. A parent-theme edit can be overwritten. Use saved block-template customization or an appropriate child-theme integration and retain a documented rollback path.
Accessibility and mobile
Static positioning helps avoid persistent obstruction, but the header still needs keyboard testing and visible focus. Preserve the theme’s skip link rather than assuming the new visual header provides one. The menu is an in-flow disclosure with ordinary links, not a modal dialog.
The layout switches at 600 pixels and lets the open navigation occupy its own row. Check the longest real labels at 320 pixels and with larger text. Escape should close the menu and focus the toggle. A desktop resize should reset the mobile state. No image, animation library, or remote menu service is required by the source.
Frequently asked questions
Is a static header worse for navigation?
Not inherently. It reduces persistent viewport occupation and can suit reading-focused sites. The right choice depends on the page and visitor needs, not a blanket rule.
Can I make it transparent too?
You can change the background separately, but test contrast against the content behind it. Transparency does not change whether the header is static.
Can I install it with CSS alone?
No. This complete design includes markup and a mobile disclosure script. CSS alone can only restyle an existing compatible structure.
Check your installation
Verify one global header appears, scrolls away normally, and leaves no old spacer behind. Check actual link destinations, mobile menu behavior, and all templates that should use the replacement before removing your backup.
