How to Add a Glassmorphism Header to WordPress

You’ll build: Glassmorphism Header to WordPress
Code required: HTML + CSS + JS
Installation: Theme and role dependent

On this page

Before you start How the design works Replace a block-theme header Classic themes and Elementor Customize your header Troubleshoot header conflicts Accessibility and performance Frequently asked questions Check your installation

YOUR CODE, READY TO CUSTOMIZE

Complete 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-glass" data-iljs-header><a class="iljs-header-brand" href="#iljs-home">orbital.</a><button class="iljs-header-toggle" type="button" aria-expanded="false" aria-controls="iljs-glass-nav">Menu</button><nav id="iljs-glass-nav" aria-label="Example primary navigation"><a href="#iljs-work">Work</a><a href="#iljs-about">About</a><a class="iljs-header-cta" href="#iljs-contact">Let’s talk</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-glass { --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-glass .iljs-header-brand { font-weight:700;font-size:23px;text-decoration:none; }
.iljs-header-glass nav { display:flex;gap:22px;align-items:center; }
.iljs-header-glass nav a { text-decoration:none;font-size:12px; }
.iljs-header-glass .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-glass{flex-wrap:wrap;padding:18px}.iljs-header-glass .iljs-header-toggle{display:block}.iljs-header-glass nav{flex-direction:column;align-items:stretch;flex-basis:100%;padding:15px 0}.iljs-header-glass[data-iljs-ready] nav{display:none}.iljs-header-glass[data-iljs-ready][data-open="true"] nav{display:flex}}
@media(prefers-reduced-motion:reduce){.iljs-header-glass,.iljs-header-glass nav a{transition:none;animation:none}}
/* Glass look has a solid fallback when backdrop-filter is unavailable. */
.iljs-header-glass { position:sticky;top:var(--iljs-admin-offset);background:#f2e9ff;border:1px solid #ffffff80;border-radius:16px;color:#402556;box-shadow:0 8px 25px #30143a12; }
@supports(backdrop-filter:blur(16px)){.iljs-header-glass{background:#ffffffb8;backdrop-filter:blur(16px)}}
.iljs-header-glass .iljs-header-brand { color:#7d2ccb; }
.iljs-header-glass .iljs-header-cta { border-radius:30px;background:#8738d3;color:#fff;padding:9px 16px; }
.iljs-header-glass nav a { transition:opacity .2s; }.iljs-header-glass nav a:hover{opacity:.7}

(() => {
 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-glass" data-iljs-header><a class="iljs-header-brand" href="#iljs-home">orbital.</a><button class="iljs-header-toggle" type="button" aria-expanded="false" aria-controls="iljs-glass-nav">Menu</button><nav id="iljs-glass-nav" aria-label="Example primary navigation"><a href="#iljs-work">Work</a><a href="#iljs-about">About</a><a class="iljs-header-cta" href="#iljs-contact">Let’s talk</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-glass { --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-glass .iljs-header-brand { font-weight:700;font-size:23px;text-decoration:none; }
.iljs-header-glass nav { display:flex;gap:22px;align-items:center; }
.iljs-header-glass nav a { text-decoration:none;font-size:12px; }
.iljs-header-glass .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-glass{flex-wrap:wrap;padding:18px}.iljs-header-glass .iljs-header-toggle{display:block}.iljs-header-glass nav{flex-direction:column;align-items:stretch;flex-basis:100%;padding:15px 0}.iljs-header-glass[data-iljs-ready] nav{display:none}.iljs-header-glass[data-iljs-ready][data-open="true"] nav{display:flex}}
@media(prefers-reduced-motion:reduce){.iljs-header-glass,.iljs-header-glass nav a{transition:none;animation:none}}
/* Glass look has a solid fallback when backdrop-filter is unavailable. */
.iljs-header-glass { position:sticky;top:var(--iljs-admin-offset);background:#f2e9ff;border:1px solid #ffffff80;border-radius:16px;color:#402556;box-shadow:0 8px 25px #30143a12; }
@supports(backdrop-filter:blur(16px)){.iljs-header-glass{background:#ffffffb8;backdrop-filter:blur(16px)}}
.iljs-header-glass .iljs-header-brand { color:#7d2ccb; }
.iljs-header-glass .iljs-header-cta { border-radius:30px;background:#8738d3;color:#fff;padding:9px 16px; }
.iljs-header-glass nav a { transition:opacity .2s; }.iljs-header-glass nav a:hover{opacity:.7}


</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>

Download standalone HTML Download source bundle

Before you start

Try the standalone page before editing your WordPress header. Replacing a global header can affect every template that uses it, so make a backup and use a staging copy. The download includes a block-header.html fragment wrapped in a valid Custom HTML block delimiter. It is an installation starting point, not a tested import for every block theme. No actual WordPress installation was used to certify this pattern.

How the design works

The .iljs-header-glass root is a semantic header with a brand anchor, a toggle, and a labeled navigation landmark. Flex layout separates the brand from the links. Below 601 pixels, the menu becomes an in-flow disclosure rather than a fullscreen modal.

The default surface is a pale, mostly solid background. An @supports rule enables translucency and backdrop-filter: blur(16px) when the browser supports it. This fallback matters: a header should remain readable when blur is unavailable. The actual contrast depends on the content moving behind it, so test more than a pale example section.

position: sticky and the --iljs-admin-offset variable control its top position. The script manages the mobile disclosure, closes on Escape or an outside click, and returns focus to the toggle when Escape closes it. Before initialization, mobile links remain visible; the script then enables the closed disclosure state. It does not read or manage WordPress’s menu database.

Replace a block-theme header

On staging, open Appearance → Editor with a block theme active. Locate the actual Header template part, commonly under Patterns and Template Parts. Labels can differ by WordPress version.
Inspect the templates that reference this part. Save an export or record the existing block structure so you can restore it.
Edit the Header part, not the content of one page. Remove or replace the existing header’s inner layout rather than adding another header beneath it.
Insert a Custom HTML block and paste the snippet markup. If using the code editor for the part, use the downloaded block-header.html wrapper rather than assuming arbitrary HTML is valid block serialization.
Install the CSS and JavaScript through a permitted site-wide path. A child theme can enqueue the files; an administrator-approved snippet tool is another option. The markup fragment alone does not install its stylesheet or behavior.
Save the Header part, preview the home page and an internal page, then check every relevant template. Remove duplicate header markup only after confirming which part each template uses.

Our block-theme header replacement guide expands this workflow. Users without permission to save the required markup or scripts may need an administrator. WordPress 7.0’s Custom HTML CSS and JavaScript panels still depend on unfiltered_html and should not be assumed available inside every theme-editing context.

Classic themes and Elementor

Additional CSS can style an existing classic header, but it cannot replace its markup. A classic theme needs a documented hook or a compatible child-theme template override. Preserve wp_head, wp_body_open, the document structure, and the theme’s required wrappers. Follow the classic-theme header guide rather than overwriting the parent theme’s header.php with a browser-only fragment.

For Elementor, a global replacement requires access to its applicable Theme Builder header feature and correct display conditions. Put the markup in an HTML widget inside that real header template, install the scoped CSS and script, and verify that the theme’s original header is suppressed by the integration. An HTML widget in a normal page is only page content. See the Elementor installation guide for those boundaries.

The current menu is static. Replace all example anchor URLs with your real pages. To use WordPress-managed menu items, build a deliberate Navigation block or PHP menu integration and adapt the selectors and mobile behavior; this snippet does not automatically track dashboard menu edits.

Customize your header

Setting	Where to change it	Effect
Brand and destination	`.iljs-header-brand` markup	Visible identity and home link
Links and CTA	Navigation anchors	Actual destinations and labels
Minimum height	`--iljs-header-height`	Default 78-pixel minimum
Admin offset	`--iljs-admin-offset`	Sticky distance below the toolbar
Corners	Root `border-radius`	Rounded glass surface
Blur	Supported backdrop-filter rule	Glass softness
Mobile breakpoint	CSS and matchMedia	When disclosure layout applies
Link transition	Scoped navigation rule	Subtle opacity response

The snippet uses system fonts independently of the tutorial website’s Clarity City font. Set a scoped font-family to use your own theme font. If you replace the text brand with an image, provide alt text and explicit dimensions. Keep its home link’s accessible name meaningful.

Troubleshoot header conflicts

Two headers appear. You probably added the fragment to a page or left the previous inner Header part in place. Return to the actual global part and replace the intended layout once.

Sticky does not work. An ancestor with overflow or a limited scroll area can change sticky behavior. Inspect the theme’s wrapper. Do not switch blindly to fixed positioning, which requires a separate content offset.

The logged-in toolbar covers the menu. Set the admin offset in the relevant logged-in theme CSS, accounting for toolbar changes on narrow screens. The default is zero because the standalone demo has no WordPress admin bar.

Mobile navigation is missing or stuck. Verify the script installation, root data attributes, unique navigation ID, and matching aria-controls. The responsive navigation tutorial explains the same disclosure pattern in a smaller component.

The surface becomes unreadable. Blur does not guarantee contrast. Increase the background opacity or keep the solid fallback when content behind the header is busy.

Accessibility and performance

Test the toggle with keyboard activation, Escape, and ordinary tab order. This is not a modal, so no focus trap is required. The header has a navigation label and visible focus outlines. It does not replace your theme’s skip link; preserve that accessibility feature during integration.

Backdrop blur can be expensive over complex moving content. Keep the blur modest and test on a phone. The design uses no continuous animation and disables transitions under reduced motion. A static minimalist header is a useful alternative when restraint and normal scrolling are preferable.

Frequently asked questions

Is it transparent or sticky?

It is translucent and sticky in this implementation. You can change either characteristic independently. Transparent describes the surface; static means the header scrolls normally with content.

Can Additional CSS install this whole design?

No. The design includes markup and a mobile script. Additional CSS alone cannot create the brand links or replace the theme’s header structure.

Was the block fragment tested in WordPress?

The block wrapper was generated and its browser output tested separately. Actual theme import, template coverage, and role permissions still need staging verification in your WordPress installation.

Check your installation

Verify one header appears across your intended templates, every link resolves, the toolbar does not cover it, and the mobile disclosure works. Keep the original header backup until you finish those theme-specific checks.