BugWP logo BugWP
Back to Community
Home / Community / Plugin → Elementskit elementor addons and templates

Troubleshooting Common ElementsKit Nav Menu Issues on Mobile

37 threads Sep 16, 2025 Plugin → Elementskit elementor addons and templates

Content

ElementsKit's Nav Menu widget is a powerful tool for Elementor users, but like any complex feature, it can sometimes run into issues, particularly on mobile devices. Based on community reports and solutions, this guide covers the most frequent mobile menu problems and how to resolve them.

Common Mobile Menu Issues and Their Fixes

1. Menu Disappears, Glitches, or Fails to Load

This is one of the most reported problems. Users click the hamburger icon, and the menu either fails to appear, flashes briefly, or loads with visual glitches.

Why it happens: This is often caused by a CSS conflict, typically related to the z-index property or JavaScript errors from other plugins or the theme. The z-index controls the stacking order of elements; if another element has a higher value, it can render on top of the menu.

Solution: Try adding the following CSS code to your site via Appearance > Customize > Additional CSS. This increases the menu's stacking priority to ensure it appears above other elements.

header {
    z-index: 999999 !important;
}

Important Note: This global fix can sometimes cause the site header to overlay the WordPress admin bar on desktop. To target only mobile and tablet devices, use a media query:

@media (max-width: 1024px) {
    header {
        z-index: 999999 !important;
    }
}

2. Dropdown Menus Not Working on Mobile

A specific bug occurs when a top-level menu item has a link. On mobile, clicking the dropdown arrow next to it does nothing. This happens because the arrow icon is inside the anchor tag, so clicking it also triggers the link.

Why it happens: This is a known design flaw in some versions of the widget where the click event for the dropdown toggle is conflicted.

Solution: As a temporary workaround until a plugin update fixes the core issue, you can set the top-level menu item's link to # instead of a real URL. This allows the dropdown toggle JavaScript to function correctly. Remember, this is not an ideal permanent solution for SEO or usability.

3. Menu Not Closing on Mobile

After navigating the site, the mobile menu overlay refuses to close, leaving a grey layer over the page and making the site unusable.

Why it happens: This is frequently a conflict with your theme's JavaScript or with anchor links on one-page sites.

Solution: Add the following CSS to force the menu overlay to close correctly. Paste it in Appearance > Customize > Additional CSS.

@media (max-width: 1024px){
.elementskit-menu-overlay, .elementskit-navbar-nav-default {
    left: -100% !important;
}
.elementskit-menu-offcanvas-elements.active {
    left: 0 !important;
}
}

4. Menu Partially Visible or Cut Off When Scrolling

When the page is scrolled down, opening the mobile menu only shows the top portion, and the rest is cut off.

Why it happens: This is usually due to CSS overflow properties being set on parent containers, which clip the menu's content.

Solution: The following CSS can help make the entire menu visible. Apply it via the Additional CSS section.

@media (max-width: 767px) {
.ekit_menu_responsive_mobile .elementskit-navbar-nav-default .elementskit-navbar-nav,
.ekit_menu_responsive_tablet .elementskit-navbar-nav-default .elementskit-navbar-nav {
    display: block !important;
    visibility: visible !important;
    overflow-y: visible !important;
}
}

5. Hamburger Icon or Menu Items Not Visible

The mobile menu toggle icon or the menu items themselves are completely invisible, though they might be present in the HTML.

Why it happens: A transparent background is a common culprit. If the hamburger icon is white and the header background is also white, it will blend in. The menu container might also have a background color set to transparent.

Solution:

  1. Edit your header template in Elementor.
  2. Select the Nav Menu widget.
  3. In the widget's style settings, ensure the Menu Container and Toggle Icon have a visible background color and color set, respectively. Avoid using fully transparent backgrounds.

General Troubleshooting Steps

If the specific solutions above don't work, follow these standard steps to identify the cause:

  1. Clear All Caches: Clear your WordPress caching plugin (if you use one), your browser cache, and any server-side or CDN caches.
  2. Plugin Conflict Test: Deactivate all plugins except Elementor and ElementsKit. If the menu works, reactivate your plugins one by one to find the culprit.
  3. Theme Conflict Test: Temporarily switch to a default WordPress theme like Twenty Twenty-Four or Hello Elementor. If the menu works, the issue is likely a conflict with your main theme. You will need to report the bug to your theme's author or use CSS workarounds.
  4. Update Everything: Ensure WordPress, your theme, Elementor, and ElementsKit are all updated to their latest versions.

Many mobile menu issues stem from conflicts with other parts of your site's code. The CSS solutions provided are often effective workarounds until a more permanent fix is implemented in the plugin or theme.

Related Support Threads Support