Header Sections – Astra https://wpastra.com Fast, Lightweight & Customizable WordPress Theme for Any Website Wed, 23 Feb 2022 19:27:48 +0000 en-US hourly 1 https://wordpress.org/?v=5.9.3 https://wpastra.com/wp-content/uploads/2020/01/favicon-astra2x.png Header Sections – Astra https://wpastra.com 32 32 Header Improvements in Astra! https://wpastra.com/docs/header-improvements-in-astra/ Tue, 28 Jul 2020 03:37:55 +0000 https://wpastra.com/?post_type=docs&p=61473 Header Improvements in Astra! Read More »

]]>

Note:

Below are the classes that would not work over Astra’s 3.0 release. We are updating the classes shortly.

In this update of Astra theme v2.5.0 and Astra Pro Addon v2.6.0, we bring the following changes –

  1. [ Deprecated ] – We are pulling the plug on the No Toggle Menu Style
  1. [ NEW ] Adding a new Mega Menu Width option – Full Width Stretched
  1. [ UPDATE ] :- Following are the selectors which are updated in this release –

Header selectors in Addon

Header selectors in Addon -

Normal Header -

    Primary Header -
        - CSS Prefix                                = .main-header-menu
        - For menu li                               = .main-header-menu .menu-item
        - For menu li -> current menu item          = .main-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .main-header-menu .menu-item .menu-link
        - For menu li inside sub-menu               = .main-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .main-header-menu .sub-menu .menu-link

    Above Header -
        - CSS Prefix                                = .ast-above-header-menu
        - For menu li                               = .ast-above-header-menu .menu-item
        - For menu li -> current menu item          = .ast-above-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-above-header-menu .menu-item .menu-link
        - For menu li inside sub-menu               = .ast-above-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-above-header-menu .sub-menu .menu-link

    Below Header -
        - CSS Prefix                                = .ast-below-header-menu
        - For menu li                               = .ast-below-header-menu .menu-item
        - For menu li -> current menu item          = .ast-below-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-below-header-menu .menu-item .menu-link
        - For menu li inside sub-menu               = .ast-below-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-below-header-menu .sub-menu .menu-link

Transparent Header - 

    Primary Header -    
        - CSS Prefix                                = .ast-transparent-header .main-header-menu
        - For menu li                               = .ast-transparent-header .main-header-menu .menu-item
        - For menu li -> current menu item          = .ast-transparent-header .main-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-transparent-header .main-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-transparent-header .main-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-transparent-header .main-header-menu .sub-menu .menu-link

    Above Header -
        - CSS Prefix                                = .ast-transparent-header .ast-above-header-menu
        - For menu li                               = .ast-transparent-header .ast-above-header-menu .menu-item
        - For menu li -> current menu item          = .ast-transparent-header .ast-above-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-transparent-header .ast-above-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-transparent-header .ast-above-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-transparent-header .ast-above-header-menu .sub-menu .menu-link

    Below Header -
        - CSS Prefix                                = .ast-transparent-header .ast-below-header-menu
        - For menu li                               = .ast-transparent-header .ast-below-header-menu .menu-item
        - For menu li -> current menu item          = .ast-transparent-header .ast-below-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-transparent-header .ast-below-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-transparent-header .ast-below-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-transparent-header .ast-below-header-menu .sub-menu .menu-link

Page Header -

    Primary Header - 
        - CSS Prefix                                = .ast-advanced-headers .main-header-menu
        - For menu li                               = .ast-advanced-headers .main-header-menu .menu-item
        - For menu li -> current menu item          = .ast-advanced-headers .main-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-advanced-headers .main-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-advanced-headers .main-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-advanced-headers .main-header-menu .sub-menu .menu-link

    Above Header - 
        - CSS Prefix                                = .ast-advanced-headers .ast-above-header-menu
        - For menu li                               = .ast-advanced-headers .ast-above-header-menu .menu-item
        - For menu li -> current menu item          = .ast-advanced-headers .ast-above-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-advanced-headers .ast-above-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-advanced-headers .ast-above-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-advanced-headers .ast-above-header-menu .sub-menu .menu-link

    Below Header - 
        - CSS Prefix                                = .ast-advanced-headers .ast-below-header-menu
        - For menu li                               = .ast-advanced-headers .ast-below-header-menu .menu-item
        - For menu li -> current menu item          = .ast-advanced-headers .ast-below-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = .ast-advanced-headers .ast-below-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = .ast-advanced-headers .ast-below-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = .ast-advanced-headers .ast-below-header-menu .sub-menu .menu-link

Sticky Header -

    Primary Header -
        - CSS Prefix                                = #ast-fixed-header .main-header-menu
        - For menu li                               = #ast-fixed-header .main-header-menu .menu-item
        - For menu li -> current menu item          = #ast-fixed-header .main-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = #ast-fixed-header .main-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = #ast-fixed-header .main-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = #ast-fixed-header .main-header-menu .sub-menu .menu-link
    
    Above Header -
        - CSS Prefix                                = #ast-fixed-header .ast-above-header-menu
        - For menu li                               = #ast-fixed-header .ast-above-header-menu .menu-item
        - For menu li -> current menu item          = #ast-fixed-header .ast-above-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = #ast-fixed-header .ast-above-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = #ast-fixed-header .ast-above-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = #ast-fixed-header .ast-above-header-menu .sub-menu .menu-link

    Below Header -
        - CSS Prefix                                = #ast-fixed-header .ast-below-header-menu
        - For menu li                               = #ast-fixed-header .ast-below-header-menu .menu-item
        - For menu li -> current menu item          = #ast-fixed-header .ast-below-header-menu .menu-item.current-menu-item
        - For menu li -> anchors                    = #ast-fixed-header .ast-below-header-menu .menu-item > .menu-link
        - For menu li inside sub-menu               = #ast-fixed-header .ast-below-header-menu .sub-menu .menu-item
        - For menu anchors inside sub-menu          = #ast-fixed-header .ast-below-header-menu .sub-menu .menu-link


PS: For specifically desktop view and for higher weightage of CSS you can use .ast-desktop selector as prefix and similarly for responsive view you can add selector .ast-header-break-point.
Eg- The above CSS will work as follows - .ast-transparent-header .ast-below-header-menu
For Desktop - .ast-desktop .ast-transparent-header .ast-below-header-menu
For Mobile  - .ast-header-break-point .ast-transparent-header .ast-below-header-menu

Note

If in any case the above selector or CSS not working for you, try by higher specificity for that CSS selector.

Following are the Improvement and Fixes we have introduced from this update –

Improvement:

  • Gutenberg + UAG support in Mega Menu templates
  • Reusable Blocks support in Mega Menu Templates
  • Lowered weightage, and Optimized CSS now loading for all header
  • Removed extra CSS from headers

Fixes:

  • Menu template’s CTA buttons getting full widths.
  • Mega Menu colors not applying properly when any Template is used inside Mega Menu.
  • Mega Menu not working on Above and Below Headers in some cases.
  • Merge menu case not working with Primary hiding last menu item.
  • Menu container width mega menu not working when the primary menu is disabled.
  • Mega Menu Column heading color not working for Above Header & Below Header.
  • Related products CSS not working properly when using Elementor pro related products for WooCommerce.
  • Elementor popups are not working in the mega menu.
  • Elementor template’s anchor links inside mega menu not working.
  • Background image from Primary Header not inheriting in Sticky Header.
  • Sticky header color not reflecting when we select animation style as ‘none’.
  • Left padding missing for submenu in mobile devices.
  • Every mega menu template’s link showing submenu arrow on responsive devices.
  • Font-size of Above Header submenus works alternately for tablet & mobile.
]]> Above Header Section https://wpastra.com/docs/above-header-section/ Mon, 09 Apr 2018 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=25916 Above Header Section Read More »

]]> 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.

Above Header Menu Location
Above Header Menu Location

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 –

]]> Below Header Section https://wpastra.com/docs/below-header-section/ Mon, 09 Apr 2018 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=25917 Below Header Section Read More »

]]> 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 Below 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 last row virtually. Learn more here.

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

Below Header Layout
Astra provides two layouts for Below Header.

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

Below Header Layout One

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

Below Header Layout Two

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

Let’s have a look.

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

Below Header Menu

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

Below Header Choose Menu

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

Below Header Search

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.

Below Header HTML

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

Below Header Widget

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

Below Header Choose Widget

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

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

Below Header Bottom Border

Below Header Height
You can easily set height for the below header with a slider.

Below Header Height

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.

Below Header Mobile

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.

Below Header Mobile Merge

Colors & Background options for Below Header

Below Header Background

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

You can set following colors from available settings

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

Typography Options for Below Header

You can set typography for Below Header from Appearance > Header > Below Header.

Below Header Typography Settings, Astra 3.0+

Related Document –

]]> Header Sections Overview (Old Astra Header) https://wpastra.com/docs/header-sections-pro/ Thu, 22 Feb 2018 18:30:00 +0000 https://wpastra.com/?post_type=docs&p=24325 Header Sections Overview (Old Astra Header) Read More »

]]> This is a premium feature available with the 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.

The header Sections module introduces two header sections (Above Header and Below Header ) in the website header. Also, this document describes a feature intended for the old Astra header option. If you’re using Astra Header Builder (Astra Theme version 3.0.0+) the options described in this document will not be applicable.

Important Note:

You would not find the Above Header/Below 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 and last row virtually. Learn more here.

Astra Header Sections Activation

You can find settings under Appearance > Customize > Header

Astra Above-Below Header

Explore the settings for Header Sections in detail –

]]>