How to Add a Search Bar in Astra Theme? (Header and Sidebar)

  • Search bar in the Astra theme header can be added from theme ‘Customization > Header Builder’ page.
  • In Header Builder, you can add a search bar for Desktop, Tablet and Mobile view header.
  • In Astra theme sidebar, Search bar can be added from ‘Widgets’ page.

Let’s check out Astra theme add search bar process in detail.

How to add a Search bar in Astra theme header?

To add a search bar in Astra theme header, go to ‘Appearance > Customize > Header Builder’.

Here, in the right side bottom area, you will find header sections with ‘+’ (plus) icon option.

Now, click the ‘+’ (plus) icon in the header section where you want to add a search bar and select ‘Search’ widget from the widget popup.

At last, check your changes preview and ‘Publish’ your changes.

Astra theme header Search bar not display in mobile device

In Astra theme ‘Appearance > Customize > Header Builder’ settings, there are separate settings from desktop, tablet and mobile devices.

Here, if you do not add ‘Search’ widget for mobile device, then it will not display on mobile devices.

To make the search bar visible on mobile devices, go to ‘Appearance > Customize > Header Builder’ page.

Next, search mobile preview from the left bottom area and add ‘Search’ widget to mobile header section.

How to add a Search bar in Astra theme sidebar?

To add a Search bar in Astra theme sidebar, go to  ‘Appearance > Widgets’.

Next, go to your sidebar section, click ‘+’ (plus) icon button and add ‘Search’ widget.

After doing this, click the ‘Update’ button from the top right corner to save your changes.

That’s it,

Hope you find Astra theme Search bar guide helpful.