For existing users –

Those who have already set No Toggle menu style –

1. The style will be active, and won’t have any effect.
2. But as soon as, user change menu style to anything else ( Fullscreen / Flyout / Dropdown ) the No Toggle menu style will be removed from their end.

For new users –

By default this style won’t be visible for selection.

And if in case, you want to get back the No toggle menu style, here is a filter for this –

add_filter( 'astra_no_toggle_menu_style_deprecate', '__return_true' );

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.

Also, this addon adds more features to the Above Header and Below Header.

If you are below version 3.0.0 of Astra theme/ Astra Addon – You would need to activate Mobile Header and Header Sections addons from Appearance > Astra Options.

Settings can be found under Appearance > Customize > Header > Above/Below Header > MOBILE HEADER.

• Display on Mobile Devices: This setting lets you choose whether you want to display above/below header sections on mobile or not.
• Merge Menu on Mobile Devices: If Menu is selected for both/either of the section in the above/below header, this option is useful. It allows choosing whether to merge above/below the header menu with the primary menu on mobile.
  • If you select it to merge, the above/below header menu will appear inside the primary header toggle button.
  • If you do not want it to merge, a separate toggle for the above/below header menu will appear on mobile.
  • This allows setting the different layout for the above/below header menu and primary header menu.
• Swap sections on mobile devices: It will alter the sections of the above/below header on mobile. Enabling this will swap section 1 and section 2.
• Layout: Mobile Header Alignment – This allows to display the above/below header section inline or stacked on mobile devices.
• Mobile Header Menu Styling: Choose the Menu Style (Dropdown, Flyout or Full-Screen), add Menu Label, and set color and style for a Toggle Button.
• Colors: You can set colors for Menu Item Border, Header Background, and Menu and Submenu Links and Background.
• Typography: Choose Menu and Submenu font style.
• Spacing: Add spacing to Mobile Header, Menu, and Submenu

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

Mobile Header Options with Astra Theme

From your WordPress dashboard navigate to Appearance > Customize > Header > Primary Menu. Here, scroll down to the “Mobile Menu” section which contains mobile header settings listed under several different tabs:

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 a mobile header below 554px.

Dropdown Target

This will allow you to set a target to open a submenu in the mobile header. It has two options – Icon and Link.
If you choose Icon, the submenu dropdown will open with the click of a small arrow icon beside the menu item name.
And if you choose Link, the submenu dropdown will open with 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 the toggle button and highlight it. (?)

Mobile Header Alignment

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

Logo (optional)

The desktop screens often require a larger logo than mobile screens. At the same time, this large logo might hide the big part of the viewport on mobile. Also, there might be differences between desktop and mobile headers that would require a different logo (color, type, size, etc.). Thus, there is a separate option for adding a different logo for mobile devices.

You can set this 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.

Mobile Header Options with Astra Pro

The 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 the 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 with 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

The 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. (?)