WPML flag icon align

Support
#1

See secure note fore align it right. I still prefer it to be 18px in size, but the rounded icon does not align good right now. Would be much approached if you guy could help out.

#2

Hello Mike,

Thanks for writing in!

To resolve your issue and align the icon, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

img.wpml-ls-flag {
    margin-right: 5px;
    vertical-align: bottom;
}

.wpml-ls-menu-item .wpml-ls-flag+span {
    font-size: 18px;
}

Please let us know if this works out for you.

#3

Hi @RueNel Thanks but it did not solve it: and I still need to have my rule to align it correctly to the left:

.wpml-ls-item span.x-graphic {
    display: none;
}

See print screen in secure note that it is not align.

#4

Hi,

You can try this code instead.

img.wpml-ls-flag {
    margin-right: 5px;
    display:inline-block;
    vertical-align:middle;
}

.wpml-ls-menu-item .wpml-ls-flag+span {
    font-size: 18px;
    display:inline-block;
    vertical-align:middle;
}

Hope that helps

#5

No, got worse alignment. See secure note.

#6

Hi There,

Please change the custom CSS to this:

.wpml-ls-menu-item .wpml-ls-flag {
    height: 18px !important;
}

.wpml-ls-item span.x-graphic {
    display: none;
}

img.wpml-ls-flag {
    margin-right: 5px;
    vertical-align: bottom;
}

.wpml-ls-menu-item .wpml-ls-flag+span {
    font-size: 18px;
    line-height: 18px;
}

**image here**

Hope it helps :slight_smile:

#7

Does not work for me… such annoying since it seems to wok so good for you when you guys edit in chrome dev tools?

#8

Hi Mike,

I removed the screenshot, and please change this part of CSS

.wpml-ls-menu-item .wpml-ls-flag+span {
    font-size: 18px;
    line-height: 18px;
}

to this

.wpml-ls-menu-item .wpml-ls-flag+span {
    font-size: 18px;
    line-height: 18px;
vertical-align: top;
}

Line height should automatically align it vertically since it’s equal to image’s height, but, looks like the text behaves differently than the image. Adding top vertical alignment should fix it.

Thanks!

#9

Great! This solved it! And I will change image icon to be 18px18px so I don’t have to force it in css when it’s not necessary. Cheers guys!

#10

You’re welcome!
We’re glad we were able to help you out.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.