Aligning WPML language switcher in topbar (PRO) + remove border n shadow + flag language arrow spacing (RESOLVED)

[darryl_corp]

Dear team,

I’m added the WPML language switcher to the topbar next to the social icons.
https://www.girisunyata.org/

I’ve followed these steps: How to add WPML language buttons to topbar (Integrity Stack)

• downloaded, added and then activated Pro child team
• went into my cpanel (through my siteground hosting admin area) and created the folder: global then added a new file all according to the post mentioned.

• girisunyata.org>public_html>wp-content>themes>pro-child>framework>views>Global>_topbar.php

Just wanted to double check one thing: I see the php file code is all about X and I’m using PRO. That is ok? Trying to avoid any issues down the road. (sorry I’m completely new to all 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' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
      <span class="language-switcher"><?php do_action('icl_language_selector'); ?></span>
    </div>
  </div>

<?php endif; ?>

Then my question is: the language switcher looks really awkward with a box around it and not aligned at all with the social icons. It looks even worse on mobile! Would it be possible to have them neatly next to each other (on the right next to social on desktop and centered on mobile), aligned, and without the box?

Thank you very much in advance,
Darryl

[ruenel]

Hello Darryl,

Thanks for writing in! Please edit your code and use this instead:

<div class="language-switcher right" style="margin-top: 10px;"><?php do_action('icl_language_selector'); ?></div>

Even if you are using the Pro theme, the template is still using the x_ naming convention since the X theme is the base framework of the Pro theme with advanced features of course. By the default, the social icons displays at the right side of the header while displaying at the middle in smaller screen. All of that because there is a built-in CSS in the theme using this code:

@media (max-width: 767px) {
  .x-topbar .x-social-global {
    float: none;
    margin-bottom: 8px;
  }
}

You can use this default code as a guide in aligning the language switcher for smaller screens. You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

Based from the screenshot, you can come up with a similar code like this:

@media (max-width: 767px) {
  .language-switcher {
    float: none;
    margin-bottom: 8px;
  }

  .wpml-ls {
      margin: 0 auto 10px;
  }
}

The margin code is also necessary to make sure that it stays at the center of the topbar. You need to add CSS code into Pro > Theme Options > CSS .

The points above will be a good starting point and if you are interested you can learn more about CSS selectors and details here

If you are more interested in having control over all aspects of the header, I suggest that you consider the Pro theme’s Header builder and you can use various elements to create a header.

Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.

Thank you.

[darryl_corp]

Dear @ruenel ,

THANK YOU SO MUCH !!

You are amazing

I’ll check out the documentation on CSS perhaps I can find a way to get rid of the border.

Cheers,
Darryl

[ruenel]

You’re welcome Darryl!
It’s good to know that it has worked for you.

[darryl_corp]

Just sharing in case anyone reads this tread:

This is what I found to remove the border and shadow of the language switcher.

.wpml-ls ul,
.wpml-ls ul li,
.wpml-ls ul li a {
box-shadow: none;
border: 0;
color: #444444;
}    

It works for my website, please know I got this from other peoples treads.

WPML shadows and border remove

Hi there, Please add this code in the Global CSS: .widget .wpml-ls ul, .widget .wpml-ls ul li, .widget .wpml-ls ul li a { box-shadow: none; border: 0; color: #fff; } Here are some related links for further reading: Intro to CSS - https://goo.gl/mFuWQT How to get CSS selectors - https://goo.gl/BmoH39 Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa Hope this helps.

How to remove border and shadows? - WPML

Darryl

[ruenel]

Hey Darryl,

Thanks for sharing this information.

Cheers.

[darryl_corp]

Additional info obtained from WPML support:

CSS to be added WPML> languages> language switcher options> additional CSS

To set space between flag and language:

span.wpml-ls-native {
margin-left: 7px; 
}

To set spacing between language and drop down arrow:
Top bar

.language-switcher .wpml-ls-legacy-dropdown {
width: 130px;
}    

Footer

center > .wpml-ls-legacy-dropdown {
width: 125px;
}

[tristup]

Hi Darryl,

Thanks for sharing these valuable information.

Thanks