Home › Support › English Support › [Resolved] Language Switcher style (css)

[Resolved] Language Switcher style (css)

If you are having a notice about writing the .mo files please read this doc

Hi, Amit here, I am the WPML Support Manager, our current ticket queue is high, update your WPML plugins and make sure you meet the minimal requirements for running WPML before reporting an issue please - many tickets are resolved doing that

Please look at our updated list of Known Issues and you can also use our support search to find helpful information and of course review our documentation before opening a ticket.

If you do need to open a ticket please make sure to provide us with all the needed information as described in this page

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

Tagged: 

This topic contains 6 replies, has 2 voices.

Last updated by ioannaC 2 years, 9 months ago.

Assigned support staff: Joanna.

Author Posts
January 25, 2017 at 7:53 am #1190091

ioannaC

i need your help for the language switcher . The spaces between the flags are to big. Css dosen't fix that for all pages and as i read (here: https://wpml.org/documentation/getting-started-guide/language-setup/designing-custom-language-switchers-using-template-files/ ), this is one of the ways that i can do for?
This way is little difficult for me. Help please?? 🙂

Thank you in advance.

Untitled.jpg
Untitled.jpg
January 25, 2017 at 11:36 am #1190345

Joanna

Hello @ioannac,

Could you please share the URL of your website where I can see the issue? This will help me spot the CSS class that you need to modify to have your flags closer to each other.

In the meantime, please try to use "!important" for the CSS rules you are overwriting. Make sure that the menu on all pages uses the same classes. It's possible that you have a different menu with different classes that you need to modify your CSS rules for.

Can you also please share the debug information? You will find the required information in WPML->Support->Debug Information. Please copy the info from the 'debug info' box and paste it in your next reply (it will be private).
January 25, 2017 at 11:44 am #1190355

ioannaC

Hello Joanna,
my website link is:
hidden link

January 25, 2017 at 8:02 pm #1190862

Joanna

Hello @ioannac,

Please try the following:
1. Go to WPML->Languages.
2. Scroll down to the" Language switcher options" section.
3. Add the following code to the "Additional CSS" field:

#header-menu li.wpml-ls-menu-item {
    margin-top:  0 !important;
    margin-left:  10px !important;
}

4. Save changes.

If you want to have more space between normal menu items and the language switcher, use the following code:

#header-menu li.wpml-ls-menu-item:not(.wpml-ls-first-item) {
    margin-top:  0 !important;
    margin-left:  10px !important;
January 26, 2017 at 9:21 am #1191214

ioannaC

Hello Joanna,
I insert these code to the "Additional CSS" field but i don't see any changes
January 26, 2017 at 12:32 pm #1191446

Joanna

Hello @ioannac,

If you have a similar field (additional CSS) in your theme options, try to add the code there. If not, you may need to edit the theme's original CSS file.

Additionally, if you have any cache on your server, please clear it. Also, always check your website in the browser's incognito mode to make sure that it's not the browser's cache issue.

You may also try to add the mentioned rules to the specific IDs, e.g.:

#menu-item-wpml-ls-medartclinicmenu-el, #menu-item-wpml-ls-medartclinicmenu-ru {
    margin-top:  0 !important;
    margin-left:  10px !important;
}

#menu-item-wpml-ls-medartclinicmenu-en {
    margin-top:  0 !important;
}

However, you need to remember that these IDs may change if you change anything in your menu or language switcher.

If you still can't force additional CSS rules to work, I'd recommend you contact your theme's authors and ask them which classes should you overwrite to have it work.
January 30, 2017 at 8:50 am #1193366

ioannaC

Thank you Dear Joanna my problem is resolved 🙂