Language switcher for sticky navigation on mobile with MultilingualPress

You should be able to do something like this:

/* Static color */
.main-navigation ul#menu-lang-switch li a {
    color: #ffffff;
}

/* Hover color */
.main-navigation ul#menu-lang-switch li:hover a {
    color: #ff0000;
}

If its not working i would need to see the site with the widget being displayed

Thanks David!

The widget is being displayed on the staging site: it's the language switcher to the right of the WooCommerce cart icon. It's displaying on desktop, tablet, and mobile. However, it seems the styling you suggested is only being applied to mobile.

Did you intend it to display only on mobile? If so, it's not doing that. But having it display on all viewports accomplishes what I'm wanting to do (clear and consistent language switching on all devices), so I'm happy to work with it as it is.

I've provided a current link in the private information. In this version I've removed the old language switcher from the primary navigation menu in favour of using the switcher in the custom widget area. I like this approach because it seems to display consistently for all viewports.

I guess my question has become: how would I apply styling to this widget for all of desktop, tablet, and mobile?

Thanks again!

Update the CSS to:

/* Static color */
.main-navigation ul#menu-lang-switch-1 li a,
.main-navigation ul#menu-lang-switch li a {
    color: #ffffff;
}

/* Hover color */
.main-navigation ul#menu-lang-switch-1 li:hover a,
.main-navigation ul#menu-lang-switch li:hover a {
    color: #ff0000;
}

That's great David! Now it's all done.

Thanks so much for all your support. You helped me accomplish what I set out to do, and taught me a lot along the way!

Hoping it's a great week,
Chris.

Glad we could be of help!