{"id":25917,"date":"2018-04-10T00:00:00","date_gmt":"2018-04-09T18:30:00","guid":{"rendered":"https:\/\/wpastra.com\/?post_type=docs&p=25917"},"modified":"2022-02-23T17:53:07","modified_gmt":"2022-02-23T12:23:07","slug":"below-header-section","status":"publish","type":"docs","link":"https:\/\/wpastra.com\/docs\/below-header-section\/","title":{"rendered":"Below Header Section"},"content":{"rendered":"\n

This is a premium feature available with Astra Pro Addon<\/strong> plugin. To use these Pro features, you need to have the Astra theme<\/a> along with the Astra Pro Addon installed on your website.<\/p>\n\n\n\n

Note:<\/h4>

You would not find the\u00a0Below Header Section<\/strong>\u00a0separately if you are above the Astra version 3.0.0. You will need to visit the Header Builder section and edit the insert elements to the last row virtually.\u00a0Learn more here<\/a>.<\/p><\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

The Below Header Section will appear below the primary header. It helps to show a call to action button, contact details, social media icons, menu etc. Make sure you have activated Header Sections<\/a> module from Astra Pro.<\/p>\n\n\n\n

Below Header Layout<\/strong>
Astra provides two layouts for Below Header.<\/p>\n\n\n\n

Below Header Layout 1
<\/strong>It will display section 1 to the left side and section 2 to the right side.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Below Header Layout 2
<\/strong>It will allow you to display only one section at the center of the below header.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Section 1 and Section 2
<\/strong>You can put content into two different sections in below header. You can choose options for each section form drop down.<\/p>\n\n\n\n

Let\u2019s have a look.<\/p>\n\n\n\n

Menu
<\/strong>You can display menu in the below header with this option.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

You would need to create a menu under Appearance > Customize > Menus > Create a new menu<\/strong> and assign it to below header menu.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Search
<\/strong>It will add a search icon for a search box. When you click on the icon, the search box will appear.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Text \/ HTML
<\/strong>It will allow you to insert text and HTML code. You can insert a call to action button, contact number, email address etc.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Widget
<\/strong>You can add a widget to the below header with this option.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

After selecting the widget option, you will able to set a widget from Appearance > Customize > Widgets.<\/strong><\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Choose any Wordpress default widget or you can use any third party plugin to add a widget to the list.<\/p>\n\n\n\n

Below Header Bottom Border Width and Color
<\/strong>You can set a bottom border for a below header with this option. Set a border width and then set a color for it.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Below Header Height<\/strong>
You can easily set height for the below header with a slider.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Mobile Header Alignment<\/strong>
It allows you to set the alignment of section 1 and section 2 on mobile devices.
You can choose it to be Inline or Stack.<\/p>\n\n\n\n

Menu Label on Small Devices<\/strong>
If you have selected a menu to be displayed in section 1\/ section 2, it will appear as a hamburger menu on mobile devices. You can set a label for this menu.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Merge menu with primary menu in responsive<\/strong>
This allows you to merge your above header menu (set with section 1\/ section 2) into a primary header on the mobile device.<\/p>\n\n\n\n

\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

Colors & Background options for Below Header<\/strong><\/h4>\n\n\n\n
\"Below<\/a><\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

You can set background and content color for Below Header from Appearance > Customize > Header > Below Header<\/strong><\/p>\n\n\n\n

You can set following colors from available settings<\/p>\n\n\n\n