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

How to Create and Manage Multiple Headers for Different Pages in Elementor

19 threads Sep 10, 2025 Plugin → Ultimate addons for elementor

Content

One of the most powerful features of the 'Header, Footer & Blocks' plugin for Elementor is the ability to create different headers for different parts of your website. However, a common point of confusion arises when users create multiple headers but find that only one is displaying across their entire site. This guide will explain why this happens and walk you through the correct way to set up conditional display rules for your headers.

Why Isn't My Second Header Showing Up?

The core of this issue typically lies in the plugin's display rule hierarchy. When you create multiple headers, the plugin needs explicit instructions on where each one should appear. Without these rules, headers can conflict, and one may override the others. Based on community support threads, this is often because a header set to display on the 'Entire Site' will take precedence over more specific headers unless you tell it not to.

How to Fix It: Using Display and Exclusion Rules

The solution is to use the plugin's built-in Display Rules and Exclusion Rules to precisely control the visibility of each header template. Here’s a step-by-step method:

  1. Create Your Headers: First, design each unique header you need (e.g., a main header, a header for your homepage, and a header for a specific product category).
  2. Set Specific Display Rules: For each header, go to its editing screen and look for the 'Display On' condition box in the right-hand panel.
    • For a homepage-specific header: Set 'Display On' to 'Pages' > 'Front Page'.
    • For a header on specific pages or posts: Set 'Display On' to 'Pages' and then select the specific pages from the list.
  3. Use Exclusion Rules for Your 'Entire Site' Header: If you have a default header you want on most pages, create a header and set its 'Display On' rule to 'Entire Site'. However, to prevent it from overriding your special headers, you must also set an 'Exclude On' rule.
    • In the 'Exclude On' condition box for your 'Entire Site' header, add all the pages where a different header should appear (e.g., your homepage and any other pages with unique headers).

This combination of specific display rules and careful exclusions ensures that each header appears exactly where you want it to, without conflict.

Alternative Method: Using a Single Header with Conditional Blocks

For scenarios where you need a drastically different header for mobile vs. desktop, creating two separate headers can sometimes cause loading issues, as noted in one community thread. A more efficient solution is to build a single header template in Elementor and then use its responsive editing modes.

  1. Create one header template.
  2. Inside the template, create two sections or blocks: one designed for desktop and one for mobile.
  3. Using the 'Advanced' tab in Elementor's editor, set the responsive visibility for each block.
    • Hide the desktop block on Mobile and Tablet views.
    • Hide the mobile block on Desktop view.

This method can improve performance by loading a single template and simply showing or hiding parts of it based on the user's device.

Troubleshooting Common Problems

  • Theme Conflicts: Some themes have their own header logic that can interfere. A common troubleshooting step suggested in the forums is to temporarily switch to a default WordPress theme like Twenty Twenty-Four to see if the issue resolves. The 'Header, Footer & Blocks' plugin also offers different integration methods (Method 1 and Method 2) in its settings for better theme compatibility.
  • Plugin Conflicts: If the option to select a template type (Header/Footer) is missing entirely, it could be due to a conflict with another plugin. Try temporarily disabling other plugins to identify the culprit.

By carefully configuring your display rules and using these troubleshooting tips, you can successfully manage multiple headers across your Elementor website.

Related Support Threads Support