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

How to Fix Common GTranslate Header Integration Issues

31 threads Sep 10, 2025 Plugin → Translate wordpress with gtranslate

Content

Integrating the 'Translate WordPress with GTranslate' plugin into your website's header is a common request, but it can sometimes lead to unexpected layout and display problems. Based on community support threads, this guide covers the most frequent header-related issues and their solutions.

Common Header Integration Problems

Users often encounter a few specific challenges when trying to place the GTranslate language selector in their header:

  • The selector not appearing at all after a page refresh.
  • Two widgets appearing in the header after an update.
  • The language dropdown popup being cut off by a fixed header.
  • The shortcode [gtranslate] rendering as plain text instead of a functional widget.
  • Layout issues where the selector doesn't align properly with other menu items.

Why These Issues Happen

These problems typically stem from conflicts with other plugins, themes (especially page builders like Elementor), or specific CSS rules on a site. The header is a complex part of a webpage, and elements with fixed positioning, specific z-index values, or CSS transforms can interfere with how the GTranslate widget is rendered.

Solutions and Troubleshooting Steps

1. The Selector Doesn't Appear or Shows as Text

If the [gtranslate] shortcode is visible as plain text in your header, it means your theme is not processing shortcodes in that location. This is a common limitation with some themes.

Solution: You have two main options:

  • Use the Floating Selector: In the GTranslate settings, enable the 'Show floating language selector' option. You can then use custom CSS to position the floating widget exactly where you want it in the header.
  • Edit Theme Files (Advanced): If you are comfortable editing your theme's header.php file, you can use <?php echo do_shortcode('[gtranslate]'); ?> to force the shortcode to be processed. It is highly recommended to use a child theme for this to prevent your changes from being overwritten by theme updates.

2. Two Widgets Appear (Duplicate Selectors)

This often occurs after an update if the widget was added in multiple places (e.g., both in a widget area and via a menu).

Solution: The first step is to identify and remove all instances of the selector. Check your theme's widget areas (Appearance > Widgets) and menu configuration. The 'Translate WordPress with GTranslate' team has suggested that using the 'Flags with language names' option can sometimes help with integration. If the problem persists, a community-recommended fix is to install the development version of the plugin from the advanced page on the WordPress plugin directory.

3. Dropdown Popup is Cut Off by Fixed Header

When the language selector is inside a fixed header, the dropdown can be contained within it and become unreadable.

Solution: This is usually caused by a CSS property on the header. Check your header's CSS for the rule transform-style: preserve-3d; or overflow: hidden;. As one user discovered, removing transform-style: preserve-3d; resolved the issue. You can add custom CSS to override this.

4. Alignment and Styling Issues

The selector may not align correctly with other menu items, especially in mobile menus or complex headers built with page builders.

Solution: Custom CSS is your best tool here. You can target the .gtranslate_wrapper class to apply margins, padding, or text alignment. For example, to center the selector, you might use:

.gtranslate_wrapper {
    display: flex !important;
    justify-content: center !important;
}

To add space between flags, you could use:

a.glink {
    padding: 0 10px !important;
}

Add these CSS rules in your theme's Customizer under 'Additional CSS' or in your theme's stylesheet.

General Best Practices

  • Clear Caches: After making any changes, always clear your website's cache and your browser cache to see the results.
  • Use One Instance: Avoid placing the selector in multiple locations, as this can cause conflicts and duplicate widgets.
  • Check Theme Compatibility: If you are using a page builder like Elementor, consult their documentation on how to properly add shortcodes to header templates.

By methodically working through these solutions, you can successfully integrate the GTranslate language selector into your website's header without compromising your site's design or functionality.

Related Support Threads Support