[helloengParticipant]

Hi.

Is it possible to put the Polylang Language Switcher (Menu) in Top Bar? See my screenshot for what I mean.

I’d appreciate some instructions.

Thanks a lot.

[Rue NelModerator]

Hello There,

Thanks for writing in!

What you are trying to accomplish requires a template customization, we would like to suggest that you use 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 review how we recommend making template changes in Customization Best Practices.

Once the child theme is active and ready, please create a new file in your local machine. Insert the following code in the the file.

<?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();?>
      </ul>

    </div>
  </div>

<?php endif; ?>

Saved this file named as _topbar.php and upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

For more details in customizing the polylang language switcher, please check it here:
https://polylang.wordpress.com/documentation/frequently-asked-questions/the-language-switcher/
https://polylang.wordpress.com/documentation/documentation-for-developers/functions-reference/

Hope this helps. Please let us know how it goes.

[helloengParticipant]

Hi. Thanks for the quick response. Sounds more complicated than I thought. Maybe I’m approaching this the wrong way. I was thinking Top Bar because my last theme allowed for a menu to be placed there. And it doesn’t seem to make sense to put it in the X widget bar because there it would be hidden until you click to reveal the widget bar.

Would you recommend I use a different place/option to insert the language switcher?

Thanks.

[ChristopherModerator]

Hi there,

By following previous replay language switcher will be added in topbar area. Since it’s a php code we can’t provide you with a simpler solution.

If you have any question or find it unclear please let us know.

Thanks.

[helloengParticipant]

Hello again

I was able to follow your directions and it worked. I’ve also been able to remove the social buttons from the top bar, then the flags perfectly line up at the right.

One more question. If I want to KEEP the social buttons, is it possible to move them (the social buttons) to the left edge, or the center of the top bar? See my screenshot for what I mean.

Thanks a lot for your help so far!

[Rue NelModerator]

Hello There,

Thanks for the updates!

To keep the social buttons and display it to the left side of the Polylang switcher, please add the following css code in your child theme’s style.css

.x-topbar .x-social-global {
    float: left;
}

If you want to align it to the center, you may use this code:

.x-topbar .x-social-global {
    float: none;
    display: block;
    max-width: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

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

[helloengParticipant]

Hi again.

Thanks for responding so quickly! I appreciate that! Yes, your codes work, but there are a few more details to get right 🙂

Left

1. Desktop: looks great
2. Mobile: Social icons shifted down a tiny bit. AND 5th social icon moved to second line. Can we fix these 2 issues?

Center

1. Desktop: flags are shifted down, top bar height increases
2. Mobile: Flags are shifted down, I suppose the flags are too big for this version on mobile to work.

See the 4 screenshots.

So now I’m a bit torn, both visual options have something pleasing about them. But as you can both have some small details that are not perfect yet.

Any more advice to fix these small issues?

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[helloengParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

ul.language-switcher li img {
    width: 20px;
}

Find this code :

.x-topbar .x-social-global {
    float: none;
    display: table;
    max-width: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

And update it to :

.x-topbar .x-social-global {
    float: left;
    display: block;
    width: 57% !important;
    margin-left: auto;
    margin-right: auto;
    max-width: none;
}

Hope that helps.

[helloengParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Yes, you can hide them. Please add this :

.x-topbar .x-social-global{
display:none;
}

Thanks.

[helloengParticipant]

Thanks a lot!

[ChristopherModerator]

You’re most welcome.

[Author]

Posts