Do you want to learn how to add a top and search bar in the 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 theme tutorial, let me consolidate the benefits of making an attractive header for your professional website.
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.
Besides, an engaging website header is crucial in building a positive impression and will help you 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 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
Step 1: Log in to your WordPress Dashboard > Appearance> Customize
Step 2: Go to the “Header Builder” section. For your understanding, I’m adding HTML and a Button in the middle of the Header section. Look at the image below!
After including these elements, let’s start doing the setting 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 get the settings on your left, like this!
Step 5: In this General header setting, changing the height of the top bar section is possible. Under the Design tab, you will get the background color settings. Here is the screenshot for your understanding.
Step 6: Let’s customize the HTML section now. 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 like this!
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 top bar button.
Let’s look at the output!
Steps To Include A Search Bar 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 customizations. I will do some settings for your understanding.
As you can see above, it is likely to 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 will be the output; look at the image!
Step 5: You may customize the search box design. Check the following settings,
Here, you may change the search box icon color, its background & border color. Also, adjust the radius and width of the search box border. Following is the example image.
Video Tutorial
For your easy understanding, I have made a video tutorial to add a top and search bar in the Astra theme! Watch now!
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 header builder of the Astra WordPress theme, 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 design help, leave a comment.
Other Astra Theme Tutorials
How To Add Slider In Astra Theme?
