Skip Navigation

Home › Support › English Support › [Resolved] Fix Positioning of WPML Language Switcher on Login Page when using BuddyBoss Theme with "Custom Log...

[Resolved] Fix Positioning of WPML Language Switcher on Login Page when using BuddyBoss Theme with "Custom Log...

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client needed to fix the positioning of the WPML Language Switcher on the Login Page when using the BuddyBoss Theme. The issue was that the switcher was not clickable and was not properly aligned over the login form.
Solution:
We recommended adjusting the CSS properties of the WPML Language Switcher to ensure it appears correctly and is functional. Here are the steps we suggested:
1. Set a higher z-index for the language switcher to ensure it appears on top of other elements.
2. Add 

margin-left: 50%;

to center the switcher over the form.
3. Apply 

position: relative;

to the switcher div to make the z-index effective.
Here is the final CSS code to add:

.wpml-login-ls {<br />    margin: auto;<br />    padding: 0 0 24px;<br />    text-align: center;<br />    z-index: 10;<br />    position: relative;<br />    margin-left: 50% !important;<br />}

For more information on CSS z-index, you can visit Relative Documentation for the CSS z-index.

Please note that this solution might be outdated or not applicable to your specific case. We highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If the issue persists, please open a new support ticket.

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.

Tagged: 

This topic contains 1 reply, has 2 voices.

Last updated by Bobby 2 months, 3 weeks ago.

Assisted by: Bobby.

Author Posts
June 27, 2024 at 10:06 pm #15846840

calebW-2

Background of the issue:
Am hoping to fix the positioning of WPML Language Switcher on Login Page when using the BuddyBoss Theme with "Custom Login/Register Screen" feature Enabled. Here is a screen recording showing the issue: hidden link

Symptoms:
The WPML Language Switcher is blocked at the top center of the screen when using the BuddyBoss theme that has the ""Custom Login/Register Screen" setting Enabled.

Questions:
Would you all be able to see if it is possible for the WPML Language Switcher to be compatible with the BuddyBoss Theme's "Custom Login/Register Screen" feature? Currently, the language switcher is getting blocked at the top center of the screen which you can see here: hidden link. Thanks for any ideas or help you may be able to give!

June 28, 2024 at 1:41 am #15847625

Bobby
Supporter

Languages: English (English )

Timezone: America/Los_Angeles (GMT-07:00)

Hi there,

The reason you can't click is that the 'login' is on top of 'wpml-login-ls', as you mentioned using z-index, should help.

"If two positioned elements overlap without a z-index specified, the element positioned last in the HTML code will be shown on top. "

To fix it we need to do the following:

1. Set a higher z-index for the language switcher
2. Add the margin-left: 50%; to align the switcher over the form
3. Add position: relative; to the switcher Div, without this, the z-index will not take effect 🙂

Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).

hidden link" rel="noopener" target="_blank">Relative Documentation for the CSS z-index.

Here is the final CSS for the language switcher.

.wpml-login-ls {
    margin: auto;
    padding: 0 0 24px;
    text-align: center;
    z-index: 10;
    position: relative;
    margin-left: 50% !important;
}

NOTE: Always have a recent and working backup before making any changes recommended by our team or a 3rd party
June 28, 2024 at 7:14 pm #15854053

calebW-2

Thank you so much, Bobby – that style worked perfectly!

The only thing I had to do (which I am leaving a note for others, or for clarity from you) is to actually hook this style in via a function:

add_action('login_head', 'relocate_wpml_switcher_in_login_page');

function relocate_wpml_switcher_in_login_page() {
echo '
.wpml-login-ls #wpml-login-ls-form {
margin: auto;
padding: 24px 0 24px;
text-align: center;
z-index: 10;
position: relative;
margin-left: 50% !important;
}
';
}

Just adding the styles it to the child theme custom CSS or even in the customizer did not do the trick, but using it as a function did. I gleaned this approach ("login_head" action) from another support thread and that seems to have done the trick.

In case it is helpful feedback for you in helping others customers with things on the login page, it appears CSS is different there and needs to be hooked in to take!

Thank you so much, again, Bobby!

calebW-2 confirmed that the issue was resolved on 2024-06-28 19:14:42.
This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.