Language switcher in top bar

[jlampreia]

Hi,
i wish Xtheme staff a Merry Christmas and a Happy New Year.

I´m trying to put language switcher in Top Bar, i´ve added Polylang custom code to _topbar.php via child theme, /themes/x-child/framework/legacy/cranium/headers/views/global

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
	 <ul class="language-switcher right">
  	  <?php pll_the_languages( array( 'show_names' => 1 ) ); ?>
     </ul>  
    </div>
  </div>

<?php endif; ?>

---

This part is OK to show custom language switcher.
I´ve tried tweak the switcher via CSS on Theme Global CSS with this code:

/language switcher align/
.lang-item {
display: inline;
content: “|”;
padding: 0 .5em;
}

It should stay like this: PT | EN

What is wrong here, can you help me with this?
Att.
José Lampreia

[rad]

Hi José,

Your switcher is outside the topbar’s main container, please change your template code to this

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?>
	 <ul class="language-switcher right">
  	  <?php pll_the_languages( array( 'show_names' => 1 ) ); ?>
     </ul>
    </p>
      <?php endif; ?>
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

Hope this helps.

[jlampreia]

Thanks for your help Rad,
now my switcher is inside the topbar´s main container, but i can´t achieve what i wont.
Now the languages slug "PT | EN are together. I don´t understand what is wrong!
This is my css code:

/language switcher align/
.lang-item {
position: absolute;
top: 5px;
display: inline;
}

[ruenel]

Hello @jlampreia,

Your code has positioned them on top of each other. Please have it updated and use this:

/*language switcher align*/
.lang-item {
  position: relative;
  top: 5px;
  display: inline;
}

We would loved to know if this has work for you. Thank you.

[jlampreia]

Thanks a lot RueNel,
it works.

Merry Christmas

[mldarshana]

Glad we were able to help

Merry Christmas and Happy Holidays !!!

[jlampreia]

Thanks mldarshana,
i´m trying to put a divider between languages, like this: “PT | EN” but i can´t get to the success code.
I´ve tried this css but no success:

.language-switcher.right {
content: “|”;
padding: 0 .5em;
}

[ruenel]

HelloJosé Lampreia,

Please use this code instead:

.language-switcher.right .lang-item:before {
    content: "|";
    padding: 0 .5em;
}

.language-switcher.right .lang-item:nth-child(1):before {
    display: none;
}

Please let us know if this works out for you.

[jlampreia]

Awesome RueNel,
many thanks.

Happy New Year

[ruenel]

You’re most welcome!
Thanks for letting us know that it has worked for you.