By zarafc on

The default language switcher is a bullet list and I would like a horizonal list.
This question has been asked many times but I have yet to solve the problem .

The most common solution is to add the css line display: inline; somewhere.
I tried it in sites/all/modules/language_switcher

.block ul.language-switcher-locale-url {
display: inline;
list-style: none;
padding: 0;
}

I cleared the cache but it does not work.
I have the omega them enables and I also tried it there in global.css but style no joy.

Could someone post an example of the correct CSS code and in which file it should go

⋅ Categories: Drupal 7.x

Comments

zarafc’s picture

zarafc commented

I was able to do this by adding some CSS to the block region

#region-user-first ul li { display: inline; padding: 3px}

tmorgan’s picture

tmorgan commented

zarafc.. you posted that you found the answer but it wasn't clear what you actually did. I have the same issue. The css is simple enough... (thanks for that) but which file did you use?

... the correct css code and the file in which it should go...
============================
Put this one line in the template style.css

/* sets the language selection to horizontal */
#block-locale-language ul li
{
display: inline;
}

Vako’s picture

Vako commented

I added this code to my style.css file and it didn't have any effect.
The language icons are in a block, does that make any difference and do we need to change any of the code above to adapt it to our site?

manish sharma’s picture

manish sharma commented

Check is there any other rule of css that are overwriting this one for "li"... or try this
.language-switcher-locale-url li {
display: inline;}

Vako’s picture

Vako commented

Thanks, but also this code is not having any effect.
it's ok, I will live with it.

Vako’s picture

Vako commented

I finally got it working with the following code at the top of the CSS file:
#block-locale-0 ul { list-style: none; }
This will remove the bullets only from the language block.

block-locale-0 might be different for others, so use Firebug to locate the name of your block.

BigJonMX’s picture

BigJonMX commented

ul.language-switcher-locale-url li {
display: inline;
}

note:
we need the "li"

display-inline works with "li"
list-style works with "ul"

hanksterr7’s picture

hanksterr7 commented

Adding

ul.language-switcher-locale-url li {
display: inline;
}

to top of style.css in sites/all/theme/

worked for me! Thanks

westside85’s picture

westside85 commented

I tried all examples .... and nothing work for me, now use this css code and now work O.K. with Bootstrap navbar:

.language-switcher-locale-url li{
display: inline-block;
margin-right: 14px;
}