Header Improvements in Astra!

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

2. [ NEW ] Adding a new Mega Menu Width option – Full Width Stretched

3. [ 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

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.