Google Translator by Logo

Support
#1

Hello,

I have seen many threads about adding the Google translator on the top bar. Is there any way to add this align with the logo in the header instead?

I currently have the code to show the translator in the top bar by using div tags and PHP. The shortcode option in another thread did not work.

Is it possible to move that php code to the header.php file for this to work?

Hook Name and Stuff
#2

Hello There,

Thanks for writing in! Before you can align the Goggle Translator with the logo, you must place it in the same container with the logo. Please move your code to the _navbar.php file instead. Since you have your child theme active and ready, please follow the following steps below:

  • Remove the _topbar.php first.
  • Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
  • Insert the following code into that new file
<?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' ); ?>

        <?php // insert your Google Translator code here ?>

      </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">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>
  • Save the file named as _navbar.php
  • Upload this file to your server in the child theme’s folder wp-content/themes/framework/legacy/cranium/headers/views/global. You will have to create the folder path since it does not exist yet in your child theme.

Now that the Google Translator is in the same container with the logo, you may need a little css code to properly style it a bit.

Please let us know how it goes.

#3

Thanks!

I removed the topbar.php code from the child theme. Should I remove it from the main X theme folder as well?

I tried to upload the _nav.php as you stated in the child theme folder, but it shifts the entire site over and makes all sections overlap.

Here is the code I used:

<?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' ); ?>

        Choose a language: <?php echo do_shortcode('[google-translator]'); ?>
    </div>

      </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">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

It does show the Google translator, but it shifts everything right.

#4

Hi,

You can try this code instead.

<?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 class="lang-switch">Choose a language: <?php echo do_shortcode('[google-translator]'); ?></div>
      </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">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Then add this in Theme Options > CSS

.masthead-stacked .x-brand {
    display: inline-block;
    float: none;
    vertical-align:middle;
}

.masthead-stacked .lang-switch {
    display: inline-block;
    float: none;
    vertical-align:middle;
    margin-left:30px;
}

Hope that helps.

#5

Thanks! This worked on desktop and mobile as well. Thank you!

#6

Glad that we could be of a help :slight_smile:

#7

One last question,

Is there any way to center the Google Translator on mobile view? I believe you helped me in another forum to center the logo, but in the Google Chrome Inspector, I cannot seem to find how to center the google translator.

#8

Hi there,

Please try this code:

@media (max-width: 480px) {
    .masthead-stacked .lang-switch {
        margin: 0 auto;
        width: 146px;
    }
}

Hope this helps.

#9

Thanks! This helped, and I also was able to use this for the tablet. Thanks again!

#10

Hi there,

Please try updating this line:

@media (max-width: 480px)

to

@media (max-width: 767px)
#11

I already did that per the last comment. I just modified the first code you sent me.

Thanks!

#12

Hi there,

Try increasing the viewport value from 767px to 980px.

Hope this helps.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.