Skip to content Skip to sidebar

Home › Support › English Support › [Closed] how can I place the switcher at the bottom as a sticky element

[Closed] how can I place the switcher at the bottom as a sticky element

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic is split from https://wpml.org/forums/topic/table-title-cannot-be-translated/

Sun Mon Tue Wed Thu Fri Sat
- 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 9:00 – 12:00 -
- 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 13:00 – 18:00 -

Supporter timezone: Asia/Singapore (GMT+08:00)

This topic contains 3 replies, has 0 voices.

Last updated by Kor 4 weeks, 1 day ago.

Assisted by: Kor.

Author Posts
August 27, 2025 at 7:38 am #17350445

clement-chwin-chiatN

Hi, thank you for helping me resolve the issues and create a few tickets. I will check them one by one, and if the issues are already solved, I will mark them as resolved later. However, I have one more question: how can I place the switcher at the bottom as a sticky element, like in the link below?
hidden link
hidden link
August 27, 2025 at 7:41 am #17350479

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for your patience. Please refer to this documentation https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/custom-language-switcher/ that explains how you can create a floating language switcher.

I cannot help with the setup, but I can guide you further if you need assistance.

August 27, 2025 at 11:20 am #17351597

clement-chwin-chiatN

Based on the video provider, I need to assist with the following:
1. The icon should be positioned at the top instead of the bottom.
2. The Malay language box should be the same size as the English one.
3. On hover, only the flag and text will have abug appear without the box just the flag

.wpml-floating-language-switcher{
width: 180px;
}

.wpml-ls-legacy-dropdown>ul {
padding: 10px;
}

.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
margin-bottom: 0;
}

/* Force WPML floating language switcher dropdown to open upwards */
.wpml-floating-language-switcher .wpml-ls-sub-menu {
bottom: 100%; /* position the dropdown above */
top: auto; /* remove default downwards positioning */
margin-bottom: 5px;
margin-top: 0;
background: #000; /* black dropdown background */
border: none; /* no border */
}

.wpml-floating-language-switcher .wpml-ls-sub-menu a {
color: #fff !important; /* white text */
background: transparent !important;
padding: 10px; /* make dropdown items bigger */
border: none !important; /* no borders between items */
}

.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions a {
background-color: transparent !important;
color: #fff !important; /* white text */
font-size: 15px; /* make text bigger */
border:none;
}

.wpml-floating-language-switcher {
position: fixed;
bottom: 10px;
right: 100px; /* moved left from edge */
background: #000; /* black background */
padding: 5px; /* bigger padding */

z-index: 1000000; /* keep always on top */
border: none; /* no border */
-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}
This is my code

Please view the video below
hidden link
August 27, 2025 at 11:55 am #17351770

Kor
WPML Supporter since 08/2022

Languages: English (English )

Timezone: Asia/Singapore (GMT+08:00)

Thanks for your reply. Sorry, we do not offer assistance with CSS stylings. But I'm volunteering a bit here. Try using the custom CSS code below and see if it helps. 

.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions a {
    background-color: #000 !important;
}

li.wpml-ls-slot-shortcode_actions.wpml-ls-item.wpml-ls-item-ms.wpml-ls-last-item {
    padding: 0px 10px;
}

.wpml-floating-language-switcher .wpml-ls-sub-menu {

    margin-left: -5px;
    margin-right: -5px;
}

.wpml-ls-legacy-dropdown .wpml-ls-item {
   margin-left: -5px;
    margin-right: -5px;
  
}

a.wpml-ls-link {
   margin-left: -5px;
    margin-right: -5px;
  
}

DISCLAIMER: Please know that any snippet or code suggested here is for educational purposes only. they are not meant to be the final solution but instead meant to point you in the right direction and are out of the scope of our support so we can't nor will modify, improve, debug or maintain it.

The topic ‘[Closed] how can I place the switcher at the bottom as a sticky element’ is closed to new replies.