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.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
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.
- Turn on Display Search Bar in the Search Options section.
- Pick a Search Content Style and, if you want, change Search Placeholder Text.
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 |
This is Style 1, the full-screen overlay:
How It Behaves
- The field posts to your site’s home URL with the standard WordPress
sparameter, 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.
