[gybarra777Participant]

I would like to put this button at a specific spot. Can someone please help with what would be the easiest way to accomplish this.

I would like to put it on the navigation bar if possible:

http://www.midtownfs.org/

http://midtownfs.org/extra_files/mfs7.png

Here is the script for the google translator I I want to add:

<div id=”google_translate_element”></div><script type=”text/javascript”>
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: ‘en’, includedLanguages: ‘es,ko,ru,vi,zh-TW’, layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, ‘google_translate_element’);
}
</script><script type=”text/javascript” src=”//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>

[ThaiModerator]

Hi There,

Thanks for writing in.

#1] Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please add following PHP code below into functions.php locates in child theme’s folder:

add_action('x_after_view_global__nav-primary', 'x_print_google_translate');
function x_print_google_translate(){
	?>
	<div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: "en", includedLanguages: "es,ko,ru,vi,zh-TW", layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, "google_translate_element");
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
	<?php
}

#2] Try adding following CSS under Appearance > Customize > Custom > CSS:

#google_translate_element {
  position: absolute;
  right: 0;
  top: 0;
}

Hope it helps.

[gybarra777Participant]

Thanks so much for the help. You can’t imagine how helpful it is to have this forum.

I did everything that was suggested and the google translator doesn’t show up.

Again really appreciate your help. This is for http://www.midtownfs.org

http://midtownfs.org/extra_files/mfs8.png

http://midtownfs.org/extra_files/mfs9.png

[ChristopherModerator]

Hi there,

Copy _navbar.php file from framework -> views -> global and put it in the same path inside child theme, Now replace existing code with this:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
        <?php x_get_view( 'global', '_brand' ); ?>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
        <div id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'es,ko,ru,vi,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Hope it helps.

[gybarra777Participant]

I am embarrassed that I may be asking a very basic question – but I cannot find, “Copy _navbar.php file from framework -> views -> global”

Could you please be so kind to direct me a bit further? I cannot find this file anywhere.

Again, your help is so greatly appreciated.

[ChristopherModerator]

Hi there,

Please connect through FTP account and under wp-content/themes/x/framework/views/global, find and copy _navbar.php file, and put this file under wp-content/themes/x-child/framework/views/global, now open this file and modify it as suggested.

Thanks.

[gybarra777Participant]

Thank you so much for the clarification.

I did all suggested and there are a couple of things that are not working correctly. Please see pics…

Here is where the current placement of the google feature is and where I need it to be:

http://midtownfs.org/extra_files/mfs10.png

here is what happens when I click the feature – it goes to the search function instead of the google function:

http://midtownfs.org/extra_files/mfs11.png

[ThaiModerator]

Hi There,

Please replace the previous custom CSS with this:

#google_translate_element {
  position: absolute;
  right: 0;
  top: 28px;
  z-index: 999;
}
.masthead-inline .desktop .x-nav {
  margin-right: 160px;
}

@media (max-width: 979px){
  .x-btn-navbar {
    margin-top: 36px;
  }
  #google_translate_element {
    top: 0;
  }
}

Hope it helps.

[gybarra777Participant]

You guys are incredible – Thanks so much!

[RupokMember]

Hello There,

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts