Header Improvements in Astra!

No results found. Try again with different words?

Search must be at least 3 characters.

    Header Improvements in Astra!

    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.
    Was this article helpful?
    Did not find a solution? We are here to help you succeed.

    Related Docs

    111063

    Biggest Ever Cyber Monday Sale!

    00
    Months
    00
    Days
    00
    Hours
    00
    Minutes
    00
    Seconds
    111064

    Don't Miss Our Biggest Discount

    ***LIMITED TIME ONLY***

    100% Unconditional Money-back Guarantee

    Purchase today & lock in your deal!

    Scroll to Top
    Now choose your preferred
    page builder addon
    Choose your preferred page builder addon

    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.