Customizing Your Mobile Menu

How to have a custom mobile menu, different than your default menus.

By default, the mobile menu in Mai Theme is automatically created from Header Left, Header Right, and After Header menus depending on which are displaying.

How To Create A Custom Mobile Menu

You can create a custom mobile menu, with additional content (search bar, social icons, etc) simply by adding widgets to the Mobile Menu widget area.

Here are some example steps to make a custom mobile menu:

1. Create and save a new menu called “Mobile Menu” in Customizer > Menus or Dashboard > Appearance > Menus.
2. Navigate to Dashboard > Appearance > Content Areas.
3. Edit the "Mobile Menu" Content Area.
4. Add a [mai_menu] shortcode.
5. If you’d like, add a Search Bar, Social Icons, or any other block that would benefit your mobile menu.

Show Menu Text Next To Icon

If you'd like to display text next to the mobile menu icon you can use some custom PHP and CSS.

Add the following snippet to its own line at the bottom of functions.php.

/**
 * Filter mobile menu text to display without screen-reader-text class.
 *
 * @param string $text The mobile menu HTML.
 *
 * @return string
 */
add_filter( 'mai_menu_toggle_text', function( $text ) {
    return sprintf( '<span class="menu-toggle-text">%s</span>', __( 'Menu', 'textdomain' ) );
});

Add/customize the following CSS into Customizer > Additional CSS or style.css in your theme.

.menu-toggle-text {
    order: -1;
    color: var(--menu-toggle-color, var(--menu-item-link-color, var(--color-heading)));
}