BugWP logo BugWP
Back to Community
Home / Community / Plugin → Translate wordpress with gtranslate

Fixing Common GTranslate Dropdown Menu Issues: A Troubleshooting Guide

38 threads Sep 17, 2025 Plugin → Translate wordpress with gtranslate

Content

Many WordPress users rely on the 'Translate WordPress with GTranslate' plugin for multilingual functionality. A frequent area where users encounter challenges is with the plugin's dropdown menu integration, particularly when trying to place the language selector in a website's navigation menu.

Common Dropdown Menu Problems

Based on community reports, the most prevalent issues include:

  • The dropdown expanding the header/navigation area instead of overlaying it.
  • The dropdown menu not appearing or reacting when clicked.
  • Conflicts with specific themes (like Divi or Woodmart) or other scripts (like select2).
  • Styling conflicts that hide the dropdown options or cause visual glitches.
  • The "Show in menu" option not being available in the widget settings.

Why These Issues Happen

These problems typically arise from conflicts between the plugin's CSS/JavaScript and a theme's or other plugin's code. Themes often have specific rules for how menus and sub-menus should behave and appear. When GTranslate injects its own elements, these pre-existing rules can interfere, causing display or functional issues. The "Nice dropdown with flags" option, being more complex, is particularly susceptible to these conflicts.

General Troubleshooting Steps

  1. Clear Your Cache: If you use a caching plugin (like WPRocket) or a server-side cache, clear it completely after making any changes to GTranslate settings or adding custom CSS.
  2. Check for JavaScript Errors: Use your browser's console (F12) to check for any errors that might be preventing the dropdown from functioning.

Most Common Solutions

1. For Dropdowns Not Appearing or Not Clickable

This is often caused by CSS from your theme that hides sub-menus by default. A common fix is to add custom CSS to override this behavior.

.menu-item-gtranslate ul.dropdown-menu {
    display: block !important;
}

For mobile-specific issues, you might need additional media query CSS, as one user found:

@media screen and (max-width: 992px) {
    .menu-item-gtranslate ul.dropdown-menu {
        position: initial !important;
        border: none !important;
    }
}

2. For Dropdowns That Expand/Push Header Content

If the dropdown expands your header's height instead of floating over the content, the solution is often to change the CSS positioning.

.gt_option {
    position: absolute !important;
}

3. Using the Shortcode Method

If the built-in "Show in menu" widget option is causing problems or is not available, a highly recommended alternative is to use the [gtranslate] shortcode directly inside your menu.

  1. Go to Appearance -> Menus.
  2. Add a new "Custom Link" item.
  3. Set the URL to #.
  4. Set the Link Text to [gtranslate].
  5. Add this item to your menu.

This method often provides more reliable results and allows the flags to appear side-by-side. For even more control, you can use individual [gt-link lang="en"][/gt-link] shortcodes to build a custom language switcher.

4. Resolving select2 Conflicts

If you've updated from an older version (pre-3.0) and use the select2 library, you may encounter a conflict where the dropdown stops working. The solution is to ensure the change event is properly triggered. The GTranslate team suggested trying this additional JavaScript:

jQuery(".language-selector select").on('select2:select', function (e) {
    // Trigger change event logic here
});

5. Fixing Custom CSS Breaks

If adding custom CSS in the plugin's settings makes your dropdown appear empty, check for syntax errors. A missing selector or bracket can break the entire stylesheet. Test your CSS in your theme's customizer or a site-specific CSS plugin first. Always use !important to override inline styles, but ensure the rules themselves are valid.

When to Seek Further Help

Because these issues are highly specific to your theme and plugin setup, the most effective solution often requires targeted CSS. If the general solutions above don't resolve your problem, you will likely need to:

  1. Provide a Live Link: For anyone to help diagnose a visual or functional issue, they need to see it on your live website.
  2. Inspect Your Theme's Menu System: Some themes use proprietary menu systems (e.g., "heru-menu") that require specific classes for dropdowns to function. You may need to consult your theme's documentation or support for guidance on integrating third-party menu items.

By understanding these common pitfalls and their solutions, you can effectively integrate the GTranslate language selector into your site's design for a seamless user experience.

Related Support Threads Support