Search code examples
phpwordpressmenunavelementor

Why is both mobile and desktop nav menu showing on WordPress site?

Working on a WP site (site link) with Elementor Pro, my problem is that while editing the page and the site, the header looks fine, but on the live site both the mobile and desktop nav menu is showing at the same time.

I'm using an Elementor kit from Envato (link)

I had to edit some WP theme .php files to edit the nav menu, but upon restoring the original file nothing changed.

This is the code I added to the theme file (wp-content/themes/twentytwentytwo/functions.php) and it allowed me to edit the nav menus:

add_theme_support('menus');
function register_my_menus() {
$args = array( 
    'menu-1' => __( 'Main Menu' )
);
register_nav_menus( $args );
}
add_action( 'init', 'register_my_menus' );
Solution

  • I have contacted Elementor Pro Support and got a solution for this problem.

    The "problem" was using a third party Kit Libary. I switched back to the defult WordPress theme, then regenerated the CSS, switched back again for the Kit Libary I was using then regenerated CSS again (Elementor >> Tools >> Regenerate CSS)

    Turns out this is a good practice to do when Elementor themes aren't working how it should.