[envi_sncParticipant]

hello i’ve been searching for a while in the forum on adding the google translate in the header but I only found about the top bar.
Currently I’m using the Google Language Translator plugin which gives me this code to be inserted in the header/footer template:
<?php echo do_shortcode(‘[google-translator]’); ?>
but I don’t know where or in which file put this.
I’m already using a child theme, so if i have to make some modification to the files it’s not a big deal

[FriechModerator]

Hi There,

Thank you for writing in! On your child theme please navigate to this directory \x-child\framework\views\global\. There create a file named _nav-primary.php and paste the code below on it.

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
	
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
	ubermenu( $config_id, array( 'theme_location' => 'primary') ); 
 else: ?>
 

<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
<div class="right mtl"><?php echo do_shortcode([google-translator]); ?></div>
  <?php x_output_primary_navigation(); ?> 
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?> 
  <div class="left"><?php echo do_shortcode([google-translator]); ?></div>
</div>

<?php endif; ?>

Hope it helps, Cheers!

[envi_sncParticipant]

thank you, it worked. I had to add a couple of apostrophes before and after the google translator shortcode like this: ‘[google-translator]’
Anyway I’m using the default theme’s menu and right now it’s not showing inline with the menu or vertically centered in the header. you can check it here: http://www.officinaberte.it/azienda/
Also it doesn’t show at all in mobile screens

[Paul RModerator]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[envi_sncParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please implement the code so we can see the issue.

Thanks.

[envi_sncParticipant]

Sorry, I was testing some others plugin. Now it’s on

[ChristopherModerator]

Hi there,

Please update your code to :

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================
	
if( function_exists( 'ubermenu' ) && $config_id = ubermenu_get_menu_instance_by_theme_location( 'primary' ) ):
	ubermenu( $config_id, array( 'theme_location' => 'primary') ); 
 else: ?>
 

<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars" data-x-icon=""></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
<div class="right mts"><?php echo do_shortcode('[prisna-google-website-translator]'); ?></div>
  <?php x_output_primary_navigation(); ?> 
</nav>

<div class="x-nav-wrap mobile collapse">
<div class="left"><?php echo do_shortcode('[prisna-google-website-translator]'); ?></div>
  <?php x_output_primary_navigation(); ?> 
  
</div>

<?php endif; ?>

Hope it helps.

[envi_sncParticipant]

thank you, it’s perfect on desktop but still missing on mobile

[Nabeel AModerator]

Hi again,

Try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($) {
  $('#google_translate_element').clone().appendTo('.x-nav-wrap.mobile .x-nav');
});

Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.mobile .x-nav #google_translate_element {
    padding: 10px 0;
}

Let us know how this goes!

[envi_sncParticipant]

Added both but they didn’t change anything, nothing shows on mobile view

[JadeModerator]

Hi there,

Please add this code in the CSS customizer:

@media (max-width: 979px) {
    .x-nav-wrap.desktop {
        display: block;
        float: right;
    }

    .x-btn-navbar {
        float: left;
    }

    #menu-header {
        display: none;
    }
}

Hope this helps.

[envi_sncParticipant]

Thank you, it works! Great support!

[JadeModerator]

You’re most welcome.

[Author]

Posts