Mobile Header with Astra (Old Astra Header)

Astra version 1.4.0 and above provides dedicated mobile header settings so your site’s navigation looks and behaves correctly on phones and tablets, separately from the desktop header. Options include adjusting the header breakpoint, setting a different logo, choosing menu styles, and configuring mobile-specific colors.

Not sure which one your site uses? Go to Appearance → Customize → Header. If you see a Header Builder option with drag-and-drop rows, you are on the new Header Builder. If you see Primary Menu with tabbed settings, you are on the Old Astra Header and this doc applies to you.

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 default Astra header breakpoint is 921px. If you need to change the breakpoint at which the desktop header switches to the mobile header, please follow the steps in this guide: https://wpastra.com/docs/astra-header-breakpoint-width/#change-astra-header-breakpoints-for-old-header

For example, if you set the breakpoint to 554px, the desktop header will remain visible until the viewport width reaches 554px. Below that width, the mobile header will be displayed.

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 Customizer > Header > Primary Menu > Mobile Menu. Style the toggle button with these settings.

Menu Label on Small Devices

The setting can be found under Customizer > Header > Primary Menu > Mobile Menu.

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 Customizer > 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.

---

Additional Mobile Header Options with Astra Pro

Astra Pro adds additional customization options for the mobile header, including more layout, design, and styling settings.

These options are available automatically when the Astra Pro Addon is installed and activated.

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 module from WordPress Dashboard > Astra > Dashboard.

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