After building theWordPress websiteAfter that, because whether it's a blog site or a store site; most of the users are from mobile. That's why it's important to add a cell phone menu on your WordPress website.

Why your website menu should be abandoned

When building a WordPress website, a mobile-friendly, responsive theme is crucial, as nearly 50% of visitors will be viewing the site on a mobile device. Adjustments may need to be made to the way menus are displayed, especially on mobile devices. For example, a main navigation menu that takes the form of a list on a desktop device can be displayed as a hamburger menu on a mobile device. For this reason, your theme should allow you to create different mobile menus.

How to Create a Mobile Menu on a WordPress Website

Step 1: Register for the mobile menu

If your WordPress theme does not yet offer a mobile menu, you can register for one using the code below. Add the code to the child theme or custom plugin's functions.php Documentation.

// register a mobile menu
function wdm_register_mobile_menu() {
    add_theme_support( 'nav-menus' ); register_nav_menus( array('mobile-menu' => __( 'Mobile Menu', 'wdm_register_mobile_menu' ))
    register_nav_menus( array('mobile-menu' => __( 'Mobile Menu', 'wdm' ) ); }
}
add_action( 'init', 'wdm_register_mobile_menu' );

After adding this code, you will notice that the menu settings have a "Mobile Menu"Options.

Step 2: Toggle menu display

In order to switch the menu display according to the screen size, you need to use some jQuery. add the following code to the JS file that is loaded on each page. For example, you can add the code to the mobile-menu-toggle.js beginning of functions.php Loading:

// load the JS file
function wdm_mm_toggle_scripts() {
    wp_enqueue_script( 'wdm-mm-toggle', get_stylesheet_directory_uri() . '/js/mobile-menu-toggle.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'wdm_mm_toggle_scripts' );

Then, in the mobile-menu-toggle.js Add the following code to the

// hide or display the mobile menu
function toggle() {
    if ( jQuery( window ).width() >= 800 ) {
        jQuery( '.nav.mobile-menu' ).hide();
        jQuery( '.nav.desktop-menu' ).show(); } else { jQuery( '.nav.desktop-menu' ).show()
    } else {
        jQuery( '.nav.desktop-menu' ).hide(); jQuery( '.nav.desktop-menu' ).show(); } else {
        jQuery( '.nav.mobile-menu' ).show(); } else { jQuery( '.nav.desktop-menu' ).show()
    }
}

// on page load set the menu display initially
toggle();

// toggle the menu display on browser resize
jQuery( window ).resize( function () {
    toggle(); } );; jQuery( window ).resize( function () {
} ); }

Step 3: Make sure the mobile menu is displayed

In the current topic of header.php file, add the following code to ensure that the mobile menu is displayed after it has been set in the menu settings:

/* The following code checks to see if a mobile menu has been set from the back end in the menu settings. If the menu has been set, it is displayed in the header. Otherwise, if the menu is not set, a message is displayed. */
if ( function_exists ( 'has_nav_menu' ) && has_nav_menu( 'mobile-menu' ) ) {
    wp_nav_menu( array (
       'depth' => 6 ,
       'sort_column' => 'menu_order' ,
       'container' => 'ul' ,
       'menu_id' => 'main-nav' ,
       'menu_class' => 'nav mobile-menu' ,
       'theme_location' => 'mobile-menu'
    ) );
} else {
    echo "
 Mobile menu not set 
" ;
}

Ensure that the Desktop Menu is added as an additional class to the main menu to toggle the display of the menu.

Step 4: Create and set up the mobile menu

Finally, create a new menu and set it as a mobile menu. in your WordPress admin panel:

1. Create a new menu.

Create new menu

2. Add a menu item and set it as a mobile menu.

3. Save the changes made.

Add mobile menu

CSS Support

Add the following CSS to the child theme's style.css in order to support menu display switching:

.mobile-menu{
    display: none;
}
@media only screen and (min-width: 800px){
    .desktop-menu{
        display: block !important; }
    }
    .mobile-menu{
        display: none !important; }
    }
}

@media only screen and (max-width: 799px){
    .desktop-menu{
        display: none !important; }
    }
    .mobile-menu{
        display: block !important; }
    }
}

reach a verdict

With these steps, you can add a mobile menu to your WordPress theme to make your website a great user experience on different devices. If you don't want to code it yourself, you can seek the help of WordPress experts who can make sure that your website is optimized to load quickly on both mobile devices and desktops.