---
title: "How to Add Search Icon to Elementor Navigation Header Menu?"
url: https://theplusaddons.com/docs/add-search-icon-to-elementor-navigation-header-menu/
date: 2023-10-28
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "A search icon in the header lets visitors search from any page without hunting for a search box in a sidebar or footer. With the Header Meta Content widget in..."
image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Add-Search-Icon-to-Elementor-Navigation-Header-Menu_-1024x536.jpg
word_count: 767
---

# How to Add Search Icon to Elementor Navigation Header Menu?

## 

- The Plus Addons for Elementor Header Meta Content widget adds a Search Bar item next to the navigation menu in the header template, and the row shows on every page.
- Search Content Style offers 4 layouts: Style 1 full-screen overlay, Style 2 small panel under the icon, Style 3 small panel beside the icon, and Style 4 field sliding out sideways from the icon.
- Display Search Bar must be switched on in Search Options, because adding the Meta Content item alone does not render anything.
- The search uses the site’s normal WordPress search with the s parameter, and it opens results on the WordPress search results page without inline suggestions.

A search icon in the header lets visitors search from any page without hunting for a search box in a sidebar or footer. With the Header Meta Content widget in The Plus Addons for Elementor you can put one straight next to your navigation menu.

The icon expands into a search field when it is clicked. You choose how that field appears — as a full-screen overlay, a small dropdown, or a field that slides out beside the icon.

*To check the complete feature overview documentation of The Plus Addons for Elementor Header Meta Content widget, [click here](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/).*

***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

Table Of Contents

## Before You Start

- **Edition:** **Free** — the **Search Bar** item and all four of its **Search Content Style** layouts work in the free plugin.- **Widget to enable:** Header Meta Content, switched on under **The Plus Addons > Widgets**.- **Where to add it:** your header template, so the row shows on every page. The widget's own **Use with Theme Builder** section links to a **Create Header Template** button.- **Two steps, always:** adding an item in **Meta Content** is only half of it. Nothing appears until you also turn on that item's own **Display** switch in its section further down the Content tab.

## Add the Search Bar Item

- Add the **Header Meta Content** widget to your header template.- In **Meta Content**, open the item and set **Select Options** to **Search Bar**.

![Select Options set to Search Bar in the Header Meta Content widget's Meta Content repeater](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-select-search-select-icon-list.webp)

- Turn on **Display Search Bar** in the **Search Options** section.

![Display Search Bar switched on in the Search Options section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-search-options-display-search-bar.webp)

- Pick a **Search Content Style** and, if you want, change **Search Placeholder Text**.

![Search Content Style dropdown in the Search Options section](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-search-options-search-bar-content-style.webp)

## Search Options Settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| Display Search Bar | Turns the search item on. Nothing renders without it | Off |
| Icon Style | **Style 1** is the built-in magnifier. **Custom Icon** and **Custom Image** are Pro | Style 1 |
| Search Content Style | How the field opens: Style 1, 2, 3 or 4 | Style 1 |
| Open Content Position | Whether the field opens to the left or the right of the icon. Shown for Search Content Style 3 and 4 only | Left |
| Search Placeholder Text | The grey text inside the empty field | Search... |

## The Four Search Content Styles

All four are hidden until the icon is clicked. What differs is where the field appears and how you close it.

| Search Content Style | How it opens | How it closes |
| -------------------- | ------------ | ------------- |
| Style 1 | A full-screen overlay across the whole viewport, field centred | Only with the X button |
| Style 2 | A small panel that fades in under the icon | Clicking the icon again, or anywhere outside |
| Style 3 | A small panel that drops next to the icon | Clicking the icon again, or anywhere outside |
| Style 4 | The field slides out sideways from the icon, inline in the row | Clicking the icon again, or anywhere outside |

![Search field open beside the search icon in a site header, with a search term typed in](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-result-search.webp)

This is **Style 1**, the full-screen overlay:

![Full-screen search overlay opened from the header search icon, with a search term typed in](https://theplusaddons.com/wp-content/uploads/2026/09/headermeta-result-search-style1.webp)

![Animated demo of the header search icon opening a search field](https://theplusaddons.com/wp-content/uploads/2023/10/header-meta-content-search-bar-demo.gif)

## How It Behaves

- The field posts to your site's home URL with the standard WordPress `s` parameter, so results land on your normal WordPress search results page.- **Search Placeholder Text** changes the placeholder and nothing else. It does not change what is searched.- **Open Content Position** only does something on **Search Content Style 3** and **Style 4**. The other two ignore it.- If you add two **Search Bar** items to the repeater you get two search icons, both driven by the same **Search Options** settings.

## Limitations

- The search is your site's normal WordPress search. There is no setting here to limit it to products, or to one post type.- Results open on the WordPress search results page. There is no inline list of suggestions as you type.- **Search Content Style 1** does not close when you click outside it. Its X button is the way out. The other three close on an outside click.- **Icon Style** set to **Custom Icon** or **Custom Image** in the free plugin leaves the icon slot empty, because those two options are Pro.

## Troubleshooting

### The search icon does not appear

Check both halves: a **Meta Content** item set to **Search Bar**, and **Display Search Bar** switched on in **Search Options**. Then check **Responsive Device** on that item.

### Clicking the icon does nothing visible

On **Search Content Style 2** and **Style 4** the panel opens right beside the icon and can sit outside a narrow header. Try **Open Content Position** the other way around on Style 3 and 4, or switch to **Style 1**.

### The custom icon I chose is not drawn

**Custom Icon** and **Custom Image** need the Pro version. In the free plugin the icon slot renders empty when either is selected, so leave **Icon Style** on **Style 1**.

## Related Docs

- [Header Meta Content Widget Settings Overview](https://theplusaddons.com/docs/header-meta-content-widget-settings-overview/)- [How to Add WooCommerce Mini Cart in Elementor Navigation Header Menu?](https://theplusaddons.com/docs/add-woocommerce-mini-cart-in-elementor-navigation-header-menu/)- [How to Add a Call To Action Button to Navigation Header Menu?](https://theplusaddons.com/docs/add-a-call-to-action-button-to-navigation-header-menu/)

## Frequently Asked Questions

**Q: Why is the search icon not showing in my Elementor header menu?**
A: The icon only appears when both parts are active: the Meta Content item must be set to Search Bar, and Display Search Bar must be switched on in Search Options. The page also calls out Responsive Device as a check, so a hidden device setting can make it look broken when the widget is actually configured. In The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH this is the main gotcha because adding the item alone does nothing.

**Q: What search styles can I use for a header search icon?**
A: The Header Meta Content widget offers four Search Content Style layouts. Style 1 opens as a full-screen overlay, Style 2 opens as a small panel under the icon, Style 3 drops a panel next to the icon, and Style 4 slides the field out sideways inline in the row. The choice matters because it changes both how much space the search takes and how users close it. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH keeps all four hidden until the icon is clicked.

**Q: Why does clicking the search icon do nothing in a narrow header?**
A: That usually happens when the panel opens beside the icon but has no room to render inside a tight header. The page specifically points to Search Content Style 2 and Style 4 as the layouts that can sit outside a narrow header. A practical fix is to flip Open Content Position on Style 3 or 4, or switch to Style 1 if you want a full-screen overlay that avoids width problems.

**Q: Can I use the header search icon to search only products or one post type?**
A: The search uses your site’s normal WordPress search with the standard s parameter, so it lands on the regular WordPress search results page. That means it behaves like default site search rather than a filtered product-only or post-type-only search. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH does not add an inline suggestion list either, so this is best treated as a standard site-wide search entry point.

**Q: What should I choose: full-screen overlay or dropdown search in the header?**
A: Style 1 is the safest choice when header space is tight because it opens across the whole viewport and only closes with the X button. Styles 2, 3, and 4 are lighter-weight and close by clicking outside or clicking the icon again, but they depend more on available space around the menu. If your navigation is compact, Style 1 avoids layout collisions; if you want something less intrusive, one of the smaller panels fits better.

**Q: Is there a free way to add a custom search icon in this widget?**
A: The free plugin only supports Icon Style 1, which is the built-in magnifier. Custom Icon and Custom Image are Pro options, so selecting either in the free version leaves that slot empty. In practice that means you should keep Icon Style on Style 1 unless you have Pro installed. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also notes that all four Search Content Style layouts are available in Free.