How to Create a Sticky Header in WordPress

A sticky header (or fixed header) stays visible at the top of the page while users scroll. It improves navigation and user experience by keeping menus and branding always accessible. You can create a sticky header in WordPress with CSS, theme customizations, or plugins. Here’s how.

Method 1: Add Sticky Header with CSS

The simplest way is to apply CSS to your header element. Most themes use a class like .site-header or header.

/* Make header sticky */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #fff; /* Ensure background covers content */
}

/* Optional: add shadow when scrolling */
.site-header.scrolled {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

To add the shadow effect only when scrolling, use a small JavaScript snippet:

<script>
document.addEventListener('scroll', function() {
  const header = document.querySelector('.site-header');
  if (window.scrollY > 50) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});
</script>

Method 2: Use Fixed Positioning

For themes where sticky doesn’t work (older browsers or conflicts), use fixed positioning:

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff;
}
body {
  padding-top: 80px; /* equal to header height to prevent content overlap */
}

Method 3: Customize via Theme Editor or Customizer

1. Go to Appearance → Customize → Additional CSS.
2. Paste one of the CSS snippets above.
3. Publish your changes.

If your theme has a “Sticky Header” option (many modern themes do), simply enable it under Header Settings in the Customizer or Theme Options panel.

Method 4: Use a Plugin (No Code)

If you prefer not to edit CSS or code, use a plugin:

• Sticky Menu & Sticky Header – lets you make any element sticky by selecting its CSS class.
• myStickymenu – simple sticky header/menu with animation and customization options.

Best Practices

• Keep it slim: Sticky headers should not take up too much vertical space.
• Ensure readability: Use a solid background to avoid text overlap with content.
• Test on mobile: Make sure the header doesn’t cover content or conflict with mobile menus.
• Performance: Use CSS where possible—plugins and heavy scripts may affect site speed.

Summary

1. Use CSS (position: sticky or fixed) to create a sticky header.
2. Add JavaScript for effects like shadows on scroll.
3. Apply the code in Appearance → Customize → Additional CSS or theme files.
4. Alternatively, enable sticky options in your theme or use a plugin for a no-code solution.

With just a few adjustments, you can create a sticky header in WordPress that keeps navigation visible and enhances user experience across your site.

🎨 Want to learn more? Visit our WordPress Customization Hub for tips and advanced techniques.