[Resolved] WPML language menu alignment and color

Hello,

Welcome to the WPML support forum. Custom CSS is out f the scope of our support however I would like to point you in the right direction to achieve those changes.

Those are the CSS rules from your theme that are affecting the language switcher:

.rt-header .apr-nav-menu--main li.menu-item-has-children > a span {
    background-repeat: no-repeat;
    background-position: center;
    z-index: 9;
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-left: 10px;
    right: 0px;
    transition: all 0.45s cubic-bezier(0.49, 0.06, 0.21, 0.64);
    transition: transform .5s cubic-bezier(.19, 1, .22, 1);
}
.rt-mobile-menu li.menu-item-has-children > a span {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 10px -3px 15px 0;
}
@media (max-width: 767px)
.rt-mobile-menu li.menu-item-has-children > ul li a span {
    margin: 0px;
}
@media (max-width: 1024px)
.rt-mobile-menu li.menu-item-has-children > ul li a span {
    display: none;
}

You can either modify them directly or create more specific rules that will be applied only to the language switcher, for example:

.rt-header .apr-nav-menu--main li.menu-item-has-children > a span.wpml-ls-native {
    width: auto;
    height: 27px;
}
.rt-mobile-menu li.menu-item-has-children > a span.wpml-ls-native {
    position: relative;
    justify-content: start;
    margin-left: 7px;
}
@media (max-width: 767px)
.rt-mobile-menu li.menu-item-has-children > ul li a span.wpml-ls-native {
    margin-left: 7px;
}
@media (max-width: 1024px)
.rt-mobile-menu li.menu-item-has-children > ul li a span.wpml-ls-native {
    display: flex;
}

PS: that's just an example to get you started. As I mentioned we don't support custom CSS work.

I hope it will be helpful!

Hello,

It's kind of tricky here because the custom CSS from the theme is overwriting the CSS from WPML. So for them it's related to WPML and for us it's a custom CSS issue.

Anyway, I'll help you get the result you want. The first step will be to add the code I sent you either in your style.css (your theme) or for an easier option, in "Appearance > Customize > Additional CSS".
That should fix the layout issues mentioned before.

Regarding the background and link colors of submenus, you can add this:

li.wpml-ls-item ul.sub-menu.menu-odd.menu-depth-1 {
    background-color: #eee;
}

li.wpml-ls-item ul.sub-menu.menu-odd.menu-depth-1 li.wpml-ls-item a {
    color: #000 !important;
}

PS: replace grey (#eee) and black (#000) by the colors of your choice.

It's hard to debug CSS just by looking at the code on the frontend. So if some issues persist, feel free to give me a temporary admin access to your site.

I will activate a private field for your next answer where you can provide that information safely (this field is only visible by you and the support team). Don't share your own admin account, create a new one that you will delete when we finish troubleshooting.

IMPORTANT: Before we proceed, please backup your site and database.

Nico