WPML - Displaying Language Selector

edited November 2016 in Theme support
Hi there,

I'm a bit lost as to how to display a Language Switcher. I've added a language select dropdown to a right side Sliding Top but it doesn't look very good. I only have 2 languages, English and French. How do I go about displaying language options on the top right of my site? I see within Header & Subheader/Extras a Custom Switcher Style option but none of the options appear once selected. Any help with explaining how to display language selections would be greatly appreciated. Here's a link:

Click here

Thanks,

T

Comments

  • Hi,

    you are using header type that has lot's of menu items and that's why right top bar does not display. If you want to display language switcher in header, we recommend to use different header type. Of course you can try to use the following css to display language switcher but you will see that it doesn't work right.
    .header-split #Top_bar a.action_button, .header-split #Top_bar a#header_cart, .header-split #Top_bar .wpml-languages { display: block !important; }
  • edited November 2016
    Hi there,

    Yes, you are correct, adding the provided css does not look right with my chosen header. Unfortunately, the header choice has been made and the site designed around it so I won't be changing the header style. I'm put the language switcher in the sliding top bar but I don't love the way it looks either. With the header that I'm using, do I have any other options for displaying the Language Selector, through css or otherwise?

    Thanks for any further help with this. Here's the link again:

    Click here

    T
  • We are sorry but there is no other (even css) way to to move search bar. Moving it into another place, requires files customization unfortunately.
  • I see. I've added it the Sliding Top as that seems to be my only option. I'm trying to get the language dropdown to appear to the far right of the page but having some trouble. Any css I use that looks ok on a computer screen, looks bad on mobile, in that the dropdown gets pushed off the screen. Can you suggest css to use in order to get this dropdown to appear to the far right side of the Sliding Top, whether viewed on a standard screen or mobile?

    Thanks for any further help with this,

    T
  • You need to send us link to page where you got this language selector on mobile first so we can have a look on it and check if there is anything we can do to help you.
  • edited November 2016
    Click here
  • Ok, got it. So to align language selector in Sliding Top to the far right, please use the following css:
    #Sliding-top .widgets_wrapper .widget { float: right !important; }
  • Absolutely perfect. Thank you!
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.