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

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

Download is Just A Click Away!

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

Download Free Astra Theme - Modal Popup Form