How To Add Top Bar & Search Bar in Astra Theme? (Video Included)

Do you want to learn how to add a top and search bar in Astra theme? You are in the right place to get detailed guidelines to include these elements in your site header. 

It is good that you are using the Astra theme to build your business site and want to design a magnificent header to attract a massive audience.

Before diving into the Astra theme tutorial, let me consolidate the benefits of making an attractive header for your professional WordPress website.

Disclosure: We get a commission when you buy a product via our affiliate link at no additional cost.

Why Design an Attractive Site Header?

The Header is the first element that your visitors see. It should be streamlined so they can clearly understand your business or the service you offer.

Additionally, an engaging website header is crucial in building a positive impression and can help increase sales. Moreover, it will reinforce your brand identity and improve user navigation.

Out of all, it is an ideal place to include your prominent Call-To-Action or contact details that will encourage your audience to take action immediately.

So, how do you add a top bar and search bar in WordPress? Let’s get into the topic!

Steps To Add A Top Bar Menu In Astra Theme

Let’s see how to include the Astra WordPress theme top bar now!

Step 1: Log in to your WordPress Dashboard > Appearance > Customize

Step 2: Go to the Astra Header Builder section. For your understanding, I’m adding the elements to the Astra top bar. I include “HTML” and a “Button” in the middle of the Header section. Look at the image below! 

After including these elements, let’s start setting the preferences. Here is an image for your reference. 

Step 3: To make the design changes, click the Header area settings (Marked in the following image)

Step 4: Click the icon to access the settings on the left, as shown here. 

Step 5: In the General header setting, you can change the height of the top bar section. Under the Design tab, you will get the background color settings. Here is the screenshot for your understanding.  

Step 6: Now, let’s customize the HTML section. Just click the section as shown in the image below.

By selecting, you will get the settings on your left. Now, you can add the text for your Top bar. Check the picture below! 

Step 7: After entering the text, modify the text color through the design section as shown here.

Step 8: Next, let me customize the button section. To do so, you need to choose that section like the image below.

After selecting, you will get the following settings on your left. 

1. Button text – Enter your preferred text for the button on the Top bar

2. Button link – Insert the target URL

3. Link rel – Fix the nature of the link as nofollow or noopener or noreferrer

4. Button Size – Set the button size as small, medium, large, or extra large

After including all these details, you may change the design with the help of the Design section, like

Pick your desired color, Border width, and radius for your Astra top bar button.

Let’s look at the output! So, we

Steps To Add Search Widget In Astra Theme

Check the simple steps to include search feature in Astra theme!

Step 1: Log in to your WordPress Dashboard > Appearance > Customize section.

Step 2: Go to the “Header Builder” section, where you can add a search section; refer to the image below.

Step 3: Select that element after including the search section and start your Astra theme customizations. I will do some settings for your understanding. 

As you can see above, it is likely that you will pick your Search Width and Height by choosing the “Search Box” option under the Search Style section.  

Step 4: You may also enable this live search option to get live article suggestions when your audience searches for something on your site. 

This is the output. You can see the Astra theme search bar placement, refer to the image below!  

Step 5: If you want, you can customize the search box design. Check the following settings, 

Here, you can change the search box icon color, its background & border color. Also, adjust the radius and width of the Astra search box border. The following is the example image. 

Video Tutorial To Customize Astra Header

For your easy understanding, I have created a video tutorial to add a top and search bar to the Astra theme. Watch now!

Frequently Asked Questions

Wrapping Up

A well-designed site header makes navigation easy and clear for your visitors. As it is their first interaction, you can gently push them to react to your CTAs and boost conversions.

With the help of the Astra header builder options, you can create a stunning web page beginning, which will help you grab your readers’ attention.

I hope you are clear with the customization settings to add a top and search bar in the Astra theme, suitable for your site design. If you need any WordPress header customization help, leave a comment.

Why Use Pro Version To Enable Top Bar & Search Icon In Astra?

If you are using the Astra free version, consider upgrading it to its pro version for the following reasons.

Other Astra Theme Tutorials

How To Add Slider In Astra Theme?

How To Include Related Posts In Astra?

How To Change Background Color In Astra Theme?