BugWP logo BugWP
Back to Community
Home / Community / Plugin → Ultimate addons for elementor

How to Fix Sticky Header Issues with Elementor Header & Footer Builder

25 threads Sep 16, 2025 Plugin → Ultimate addons for elementor

Content

Creating a sticky header with the Elementor Header & Footer Builder plugin is a common request, but it often leads to a handful of frustrating issues. Based on community support threads, users frequently run into problems where the header overlaps content, becomes difficult to edit, or doesn't work on specific devices.

This guide will walk you through the most common problems and their solutions, helping you achieve a functional sticky header without the headaches.

Why Sticky Header Issues Happen

The Elementor Header & Footer Builder plugin itself does not have a built-in sticky header feature. The recommended method involves adding custom CSS, and sometimes PHP, to your site. This manual approach is powerful but can lead to conflicts with other plugins, themes, or incorrect implementation, causing the various issues users report.

Common Sticky Header Problems & Solutions

1. Header Overlaps Page Content

The Problem: After making your header sticky, it covers the top part of your page, hiding your hero section or logo.

The Solution: This is the most reported issue. The fix is to add top padding to the first section on your page equal to the height of your header. This pushes your content down, preventing the overlap.

You can add this CSS, replacing '74px' with the actual height of your header:

body {
    padding-top: 74px;
}

/* Or target the first section directly */
.elementor-section:first-of-type {
    padding-top: 74px;
}

2. Cannot Edit Sections Behind the Sticky Header in Elementor

The Problem: In the Elementor editor, the sticky header sits on top of the editing interface, making it impossible to click on or edit the sections underneath it.

The Solution: The easiest fix is to temporarily disable the sticky CSS while you are editing. You can do this by:

  • Removing the custom CSS from the Customizer or your theme settings.
  • Using your browser's Inspect Element tool to find the header element and set it to display: none; while you work.

Once you finish editing, you can re-enable the CSS.

3. Sticky Header Doesn't Work on Mobile (or Desktop)

The Problem: The sticky header works on one device type but not another.

The Solution: This requires using CSS media queries to control where the sticky behavior is applied. The following code will make the header sticky only on desktop screens:

/* Sticky on Desktop Only */
@media (min-width: 1025px) {
    #my-custom-id {
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999;
    }
}

To make it sticky on mobile only, you would use a max-width media query instead.

4. General Sticky Code Not Working

The Problem: You've followed the tutorial but the header simply won't stick.

The Solution: Double-check your code for errors. A common mistake is using an incorrect CSS selector. The tutorial often suggests code like #my-custom-id.elementor-section {}. Try simplifying it to just use your custom ID, as the extra class can sometimes cause conflicts.

/* Instead of this */
#my-custom-id.elementor-section {
    position: fixed;
}

/* Try this */
#my-custom-id {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

Also, ensure you have correctly added the snippet to your theme's functions.php file (or via a code snippets plugin) if the tutorial requires it, and that you have entered the exact same custom ID in both the widget settings and your CSS.

5. Duplicate or Hidden Header Appearing

The Problem: A second, hidden header section appears when you enable stickiness, creating unwanted whitespace.

The Solution: This is typically caused by a conflict with another plugin or your theme that also tries to manage sticky headers (e.g., Astra Pro, Elementor Pro's sticky feature). The best course of action is to conduct a conflict test:

  1. Deactivate all plugins except Elementor and Header & Footer Builder.
  2. Switch to a default WordPress theme like Twenty Twenty-One.
  3. If the problem is resolved, reactivate your plugins and theme one by one to identify the culprit.

Alternative Solution: Use a Dedicated Sticky Plugin

If working with custom code is too technical, a reliable alternative is to use a third-party plugin designed specifically for making menus and headers sticky. Plugins like myStickymenu or Sticky Menu (or Anything!) on Scroll are popular choices in the community. To use them with a header built by this plugin, you may need to target the global header ID #masthead within the sticky plugin's settings.

By understanding these common pitfalls and their solutions, you can successfully implement a sticky header that enhances your site's user experience instead of causing frustration.

Related Support Threads Support