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 thread is resolved. Here is a description of the problem and solution.

Problem: I would like to do the following:

1. Increase the spacing between my menu and the language switcher for desktop view 2. Add a | between each individual language 3. For the mobile view menu, instead of having each language one below each other, can they lay horizontally, and sitting at the bottom spacing of the drop down menu?

Solution: Solution here: https://wpml.org/forums/topic/modify-the-spacing-as-well-as-adding-a-in-between-languages/#post-2243579

This topic contains 13 replies, has 2 voices.

Last updated by ernestC-2 1 year, 4 months ago.

Assigned support staff: Noman.

Author Posts
May 21, 2018 at 3:42 pm #2202478

ernestC-2

Dear Sir / Madam,

I would like to do the following.
1. Increase the spacing between my menu and the language switcher for desktop view
2. Add a | between each individual language
3. For the mobile view menu, instead of having each language one below each other, can they lay horizontally, and sitting at the bottom spacing of the drop down menu?

Many thanks,

Ernest

May 22, 2018 at 10:37 am #2207219

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello,

Thank you for contacting WPML Support. Can you please share page URL where I can see the issue and provide you some CSS to fix this issue.

Please add the debug report in the Debug Information box. I have also enabled debug info box for your next reply: https://wpml.org/faq/provide-debug-information-faster-support/

Thank you

May 22, 2018 at 2:35 pm #2209105

ernestC-2

Dear Noman,

Thank you for your email
My website is hidden link

Currently I have disabled other languages option

Kind regards,

Ernest

May 23, 2018 at 8:13 am #2213293

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello,

Can you please enable other languages. So, that I can give you correct CSS accordingly. At the moment I can not see any language switcher at main menu as you can see in attached screenshot.

Thank you

May 23, 2018 at 9:07 am #2213517

ernestC-2

Hi Noman,

Currently I'm still hiding the foreign languages from customers, once I have fixed the front end customisation I will let you know again. Alternatively, shall I pass you the login information?

Kind regards,

Ernest

May 23, 2018 at 11:46 am #2214927

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Okay sure, Please let me know once you finished the frontend customization.

May 26, 2018 at 4:49 am #2232191

ernestC-2

Dear Noman,

I have just enabled my multilingual pages in front end.
I now think the language selector position on the desktop full size menu is fine. I just want adjust the selector on the tablet and mobile drop down menu, into something like "EN | 繁" towards the bottom of the page.

Also, I have no CSS knowledge, may you tell me exactly where I should place the code?

Many thanks,

Ernest

May 28, 2018 at 7:04 am #2236601

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello,

You can fix this issue by adding following CSS in your theme’s style.css file or custom CSS file:

@media(max-width:992px) {
.wpml-ls-item {
    display: inline-block !important;
    position: relative;
}

.wpml-ls-item + .wpml-ls-item::before {
    content: '';
    width: 2px;
    height: 64%;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 23%;
}
}

And it will look as in attached screenshots.

Please let me know if it resolve your issue or you need further help.

Thank you

May 28, 2018 at 9:33 am #2237472

ernestC-2

Hi Noman,

Thank you, your solutions and instructions are excellent!

May I also do the following tweak?

Desktop Menu:
Add a | between "contact" and the language selector, with some extra horizontal left and right space of the |.

Tablet Menu
Add a new line vertical space between the last item of the menu and the language selector

Mobile Menu
1. Add a new line vertical space between the last item of the menu and the language selector
2. Reduce the horizontal space between the left and right of |

Many thanks,

Ernest

May 28, 2018 at 12:00 pm #2238179

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello,

Please use following CSS:

/* Desktop Menu */
@media(min-width:1000px) {
.wpml-ls-item {
    position: relative;
    margin-left: 25px !important;
}

.wpml-ls-item + .wpml-ls-item {
    position: static;
    margin-left: auto !important;
}

.wpml-ls-item::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 20px;
    background: #fff;
    left: -14px;
    top: 25px;
}

.style-light-override .wpml-ls-item::before {
	background: #000;
}
}

/* Tablet Menu */
@media(max-width:992px) {
.wpml-ls-item {
    display: inline-block !important;
    position: relative;
    margin-top: 30px !important; /* you can increase this value to adjust vertical spacing */
}

.wpml-ls-item + .wpml-ls-item::before {
    content: '';
    width: 2px;
    height: 64%;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 23%;
}
}

/* Mobile Menu */
@media(max-width:768px) {

.wpml-ls-item {
    margin-top: 30px !important; /* you can increase/decrease this value to adjust vertical spacing */
}

.wpml-ls-item a {
    padding-left: 15px;
    padding-right: 12px;
}
}

And it will look as in attached screenshots. Can you please let me know if you need further help,

Thank you

May 28, 2018 at 1:48 pm #2239033

ernestC-2

Hi Noman, many thanks for your prompt and spot on support! It is working exactly what I want! Ernest

May 28, 2018 at 1:57 pm #2239052

ernestC-2

Hi Noman,

For the menu of the desktop view, it only shows the | when my view is on the top of the page. When I scroll down the page, the | disappear, can you fix it again?

In some occasion, the | also appear beside the logo, while it is dropped down.

Many thanks again,

Ernest

May 29, 2018 at 8:19 am #2243579

Noman
Supporter

Languages: English (English )

Timezone: Asia/Karachi (GMT+05:00)

Hello,

Sorry for having issue, I have updated the previous CSS and now it looks fine also with sticky header. Please use following CSS:

/* Desktop Menu */
@media(min-width:1000px) {
.wpml-ls-item {
    position: relative;
    margin-left: 25px !important;
}

.wpml-ls-item + .wpml-ls-item {
    position: static;
    margin-left: auto !important;
}

.wpml-ls-item::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 20px;
    background: #fff;
    left: -14px;
    top: 25px;
}

.style-light-override .wpml-ls-item::before,
.is_stuck  .wpml-ls-item::before{
	background: #000;
}

.is_stuck  .wpml-ls-item::before {
	top: 16px;
}

.wpml-ls-item + .wpml-ls-item::before {
    content: none;
}


}

/* Tablet Menu */
@media(max-width:992px) {
.wpml-ls-item {
    display: inline-block !important;
    position: relative;
    margin-top: 30px !important; /* you can increase this value to adjust vertical spacing */
}

.wpml-ls-item + .wpml-ls-item::before {
    content: '';
    width: 2px;
    height: 64%;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 23%;
}
}

/* Mobile Menu */
@media(max-width:768px) {

.wpml-ls-item {
    margin-top: 30px !important; /* you can increase/decrease this value to adjust vertical spacing */
}

.wpml-ls-item a {
    padding-left: 15px;
    padding-right: 12px;
}
}

And it will look as in attached screenshots.

Thank you

May 29, 2018 at 10:50 am #2244834

ernestC-2

Hi Noman, many thanks for your prompt reply, the menus are working great now!