How to Manage a Mobile Header with Astra?

No results found. Try again with different words?

Search must be at least 3 characters.

    Mobile Header with Astra

    Astra version 1.4.0 and above provides a feature to design Mobile Header separately for responsive devices.

    It offers options to adjust Header Breakpoint, set different Logo, choose different Menu Styles, set Colors separately for the menu.

    Note:

    We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.

    Mobile Header Options with Astra Theme

    From your WordPress dashboard navigate to Appearance > Customize > Header > Primary Menu. Mobile Header options are listed under different tabs.

    Logo (optional)

    The desktop screen needs a quite wider logo. This logo on mobile might hide the big part of the viewport. A separate option for the mobile logo provides flexibility to use a different menu on mobile.

    The setting can be found under Layout > Header > Site Identity. Choose option Different Logo for mobile devices? and add a mobile device logo image here. (?)

    To adjust the size for the logo click on the responsive toggle button for Logo Width and adjust the width.

    Menu Breakpoint

    The setting can be found under Header > Primary Menu > MOBILE MENU
    The default menu breakpoint for Astra is 921px. It can be changed easily with the slider.
    For example – If a breakpoint is set to 554px then the desktop header will be visible till 554px width and it will change to mobile header below 554px.

    Dropdown Target

    This will allow you to set a target to open submenu in mobile header. It has two options – Icon and Link.
    If you choose Icon, submenu dropdown will open on the click of a small arrow icon beside the menu item name.
    And if you choose Link, submenu dropdown will open on the click of an entire menu item (link).

    Toggle Button Style, Toggle Button Color, and Border Radius

    Settings can be found under Layout > Header > Primary Menu > MOBILE HEADER.
    Style the toggle button with these settings. (?)

    Menu Label on Small Devices

    The setting can be found under Layout > Header > Primary Menu > MOBILE HEADER.
    It allows adding a label to toggle button and highlight it. (?)

    Mobile Header Alignment

    It allows choosing the alignment of logo and menu on devices below breakpoint. (?)


    Mobile Header Options with Astra Pro

    Mobile Header module from Astra Pro adds more options to the layout along with Colors & Background options.

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

    Quick Steps to Manage a Mobile Header Using the Mobile Header Module
    Step 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?
    Step 2: Activate the module from the Astra Options under the WordPress Dashboard > Appearance > Astra Options
    Step 3: Visit customizer [ Appearance > Customize > Header > Primary Menu > MOBILE HEADER ] to edit module settings

    Activate the module from dashboard under Appearance > Astra Options > Mobile Header. After activating the module additional options will be added under Appearance > Customize > Header > Primary Menu > MOBILE HEADER.

    Menu Style

    Choose a style for the menu which appears on the click of the toggle button.

    • Dropdown will be simply a list of menu items that will appear on clicking the menu toggle button.
    • Flyout style will allow the menu to slide from either end of the screen.
    • Full-Screen style will cover the whole screen and display menu item in the middle.
    • No Toggle style will not display the menu inside the hamburger menu on responsive devices. The menu will appear same as desktop.

    Border for Menu Items

    It will apply a border around each menu item. Set width to the border and then apply color.


    Colors & Background for Mobile Header

    Colors & Background module from Astra Pro provides more Colors & Background options for Mobile Header.
    You would need to activate Colors & Background and Mobile Header modules from Appearance > Astra Options.

    Settings can be found under Appearance > Customize > Header > Primary Menu.

    Click on the responsive toggle button and set the colors and background for the Mobile Header.

    Background

    Set Background Color for Mobile Header or set Background Image and adjust the opacity. (?)

    Primary Menu and Submenu

    If either of the Menu Style – Flyout or Full-Screen is selected, you can set the background image and overlay color for a menu with the Primary Menu background image. (?)


    If you are using Astra Header Footer builder that is available with Astra version 3.0 and above, refer to the document list here.

    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.