How to Set up an Above Header Using Astra?

No results found. Try again with different words?

Search must be at least 3 characters.

    Above Header Section

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

    Note:

    You would not find the Above Header Section separately 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 first row virtually. Learn more here.

    It appears above 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 module from Astra Pro.

    Above Header Layout
    Astra provides two layouts for Above Header.

    Above Header Layout 1
    It will display section 1 to the left side and section 2 to the right side.

    Above Header Layout 1

    Above Header Layout 2
    It will allow you to display only one section at the center of the above header.

    Above Header Layout 2

    Section 1 and Section 2
    You can put content into two different sections in above header. You can choose options for each section from drop down.

    Menu
    You can display menu in the above header with this option.

    Above Header Menu, Astra 3.0+

    You would need to create a menu under Appearance > Customize > Menus > Create a new menu and assign it to above header menu.

    Search
    It will add a search icon for a search box. When you click on the icon, the search box will appear.

    Above Header Search, Astra 3.0+

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

    Above Header HTML, Astra 3.0+

    Widget
    You can add a widget to the above header with this option.

    Above Header Widget, Astra 3.0+

    After selecting the widget option, you will able to set a widget from:
    Appearance > Customize > Widgets

    Above Header Add Widget, Astra 3.0+

    Choose any WordPress default widget or you can use any third party plugin to add a widget to the list.

    Above Header Bottom Border Width and Color
    You can set a bottom border for an above header with this option. Set a border width and then set a color for it.

    Above Header Bottom Border, Astra 3.0+

    Above Header Height
    You can easily set height for the above header with a slider.

    Above Header Height, Astra 3.0+

    Mobile Header Alignment
    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.

    Menu Label on Small Devices
    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.

    Above Header Mobile Menu Label, Astra 3.0+

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

    Above Header Merge Menu, Astra 3.0+

    Colors & Background options for Above Header

    You can set background and content color for Above Header from Appearance > Customize >Header > Above Header

    Above Header Color & Background, Astra 3.0+


    You can set the following colors from available settings

    • Background Color
    • Content Section
      • Text Color
      • Link Color
      • Link Hover Color

    Related Document –

    Was this article helpful?
    Did not find a solution? We are here to help you succeed.

    Related Docs

    Scroll to Top

    Download is Just A Click Away!

    Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

    Download is Just A Click Away!

    Enter your email address and be the first to learn about updates and new features.