Elementor mobile menu not showing

If the Elementor mobile menu is not showing on your WordPress website, you can use the following code snippet to troubleshoot and fix the issue. This code snippet checks if the mobile menu is enabled in Elementor and if it is, it forces the mobile menu to display.

function wpsnippets_force_elementor_mobile_menu() {
    if ( class_exists( 'ElementorPlugin' ) ) {
        $elementor_instance = ElementorPlugin::$instance;
        $settings = $elementor_instance->common->get_settings();

        if ( isset( $settings['nav_menu_breakpoint'] ) && isset( $settings['nav_menu_breakpoint_tablet'] ) ) {
            $breakpoint = $settings['nav_menu_breakpoint'];
            $tablet_breakpoint = $settings['nav_menu_breakpoint_tablet'];

            if ( wp_is_mobile() && ( $breakpoint || $tablet_breakpoint ) ) {
                add_filter( 'elementor_pro/nav-menu/frontend/hamburger_menu_args', function( $args ) {
                    $args['force_mobile'] = true;
                    return $args;
                } );
            }
        }
    }
}
add_action( 'wp', 'wpsnippets_force_elementor_mobile_menu' );

This code snippet checks if the Elementor plugin is active and if the mobile menu breakpoints are set in the Elementor settings. If the current device is a mobile device and the breakpoints are set, it adds a filter to force the mobile menu to display.

You can add this code to your theme’s functions.php file or preferably in a custom functionality plugin. After adding the code, the Elementor mobile menu should be displayed on mobile devices according to the breakpoints set in the Elementor settings.

Examples

Example #1: Troubleshooting Elementor Mobile Menu Not Showing

This example demonstrates how to troubleshoot and fix the issue of the Elementor mobile menu not showing on a WordPress website.

function wpsnippets_fix_elementor_mobile_menu() {
    add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_elementor_mobile_menu_script', 9999 );
}

function wpsnippets_enqueue_elementor_mobile_menu_script() {
    wp_enqueue_script( 'elementor-mobile-menu', get_template_directory_uri() . '/js/elementor-mobile-menu.js', array( 'jquery' ), '1.0', true );
}

This code registers a custom function wpsnippets_fix_elementor_mobile_menu() that hooks into the wp_enqueue_scripts action. Inside this function, we call another custom function wpsnippets_enqueue_elementor_mobile_menu_script() which enqueues the JavaScript file responsible for displaying the Elementor mobile menu. By adding a high priority value of 9999, we ensure that this script is loaded after other scripts, which may be causing conflicts. Make sure to replace 'elementor-mobile-menu' with the appropriate handle for your theme’s mobile menu script.

Example #2: Customizing Elementor Mobile Menu Appearance

This example demonstrates how to customize the appearance of the Elementor mobile menu by modifying the CSS styles.

function wpsnippets_customize_elementor_mobile_menu() {
    add_action( 'wp_enqueue_scripts', 'wpsnippets_enqueue_elementor_mobile_menu_styles', 9999 );
}

function wpsnippets_enqueue_elementor_mobile_menu_styles() {
    wp_enqueue_style( 'elementor-mobile-menu', get_template_directory_uri() . '/css/elementor-mobile-menu.css' );
}

In this code, we define a custom function wpsnippets_customize_elementor_mobile_menu() that hooks into the wp_enqueue_scripts action. Inside this function, we call another custom function wpsnippets_enqueue_elementor_mobile_menu_styles() which enqueues a CSS file containing the custom styles for the Elementor mobile menu. By adding a high priority value of 9999, we ensure that this stylesheet is loaded after other stylesheets, allowing us to override any existing styles. Make sure to replace 'elementor-mobile-menu' with the appropriate handle for your theme’s mobile menu stylesheet.

Example #3: Adding Custom Elements to Elementor Mobile Menu

This example demonstrates how to add custom elements, such as a search form or social media icons, to the Elementor mobile menu.

function wpsnippets_add_custom_elements_to_elementor_mobile_menu() {
    add_action( 'elementor/theme/builder/full_width_content_before', 'wpsnippets_render_custom_elements' );
}

function wpsnippets_render_custom_elements() {
    // Add your custom HTML or PHP code here to render the additional elements
}

In this code, we define a custom function wpsnippets_add_custom_elements_to_elementor_mobile_menu() that hooks into the elementor/theme/builder/full_width_content_before action. Inside this function, we call another custom function wpsnippets_render_custom_elements() which is responsible for rendering the additional custom elements. You can modify the wpsnippets_render_custom_elements() function to include your desired HTML or PHP code for the custom elements you want to add.