How to change language selector style?

The language selector can be styled to fit your site’s layout and user experience goals. You can choose from three available styles, each suited for different use cases and designs.

Change via Dashboard

Go to the Settings menu in the left-side panel and select Language Selector.

You can:

• Enable or disable the selector using the Visibility toggle
• Change the order of displayed languages
• Set a display name: Choose between Language (Country), Language only, or enter a custom label
• Choose a flag for each language
• Select the selector type: Sidebar, Dropdown, or Floating

Each change you make will be visible immediately in the live preview panel.

Sidebar Style

The Sidebar selector places language flags along the edge of the page. You can choose to pin it to the left or right side. It remains visible as users scroll.

Options:

• Show or hide flags
• Display short language codes or full names
• Choose sidebar position (left or right)

Dropdown Setup

The Dropdown selector is ideal for embedding within navigation bars or page headers.

To set it up:

1. Add an empty <div> or <span> where you want the selector to appear.
2. Assign a class name, like el-dropdown.
3. In the Dashboard, select Dropdown as the type.
4. Enter your chosen class name under Installation.
5. Configure icons, flags, and language display for both collapsed and expanded states.
6. Save & Refresh.

Floating Option

The Floating selector is a card-like overlay that sits above the page content. It’s particularly useful on mobile or minimalist layouts.

You can adjust:

• Flag visibility
• Distance from the top and left of the page

⚠️ On mobile, the selector will always appear at the bottom of the screen regardless of desktop settings.

Custom Styling

For additional visual control, you can apply custom CSS. For example, to move a dropdown selector higher on the page:

.el-dropdown {
   top: 25% !important;
}

Add this to your CMS’s custom style section. If you’re unsure how to do this, feel free to reach out.

Full Custom Selector

If you want more flexibility, you can build your own selector using the MP Express JavaScript API. This approach allows advanced behavior such as geolocation-based redirection.

This is best handled by a developer. Contact us for examples and API documentation.