Skip Navigation

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

Problem:
The menu is being displayed incorrectly and the logo is not aligned correctly.

Solution:
A small change was made to the CSS that the client was using. Note that this is very specific to her theme and may not work on your theme.

body .x-navbar {
    height: 85px;
}

body .x-navbar {
    height: auto !important;
    min-height: 85px !important;
}
 
.wpml-ls-current-language  ul.sub-menu li {
    margin-left: -4px;
}
 
.x-navbar .mobile .wpml-ls-item ul {
    margin: 0 !important;
}

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 contains 4 replies, has 2 voices.

Last updated by Cara Mc Donough 3 years, 2 months ago.

Assigned support staff: Bruno.

Author Posts
July 25, 2017 at 10:01 am #1326447

Cara Mc Donough

1. Customization Language Switcher:
A couple of weeks ago I had a similar issue with the customization of the language switcher.
I requested assistance and was forwarded the following CSS code to add to
WPML>Languages>custom css):

header .desktop .sub-menu{

min-width: inherit;

}
That fixed the problem. However since the upgrade to the beta version 3.8.0-b.2 release, alignment and positioning is no longer working. FYI, I was asked to upgrade in order to try and solve a compatibility issue.

I tried numerous CSS fixes, including fixes from other issues reported in the forum and checked your documentation. Also, different customization selection on the language page, but nothing is working. I have also tried to “Restore default” under WPML>Languages>Reset Settings, but again it hasn’t worked.

It appears that all selections made under WPML>Languages> Custom language switchers isn’t working, see screenshot.

What I am trying to achieve is both flags listed underneath each other, both left aligned (as shown in the preview in the screenshot). Also that the navigation bar does not expand when I hover over the flags.

2. Alignment logo in navigation bar:
This ties in with the second issue I have with the positioning/alignment of the logo in the navigation bar. It should not sit at the bottom, but centered.

FYI, I am using the X Theme – Integrity Stack with Child Theme & Cornerstone Builder. My credentials were provided in my previous support thread “String Translation question, Language Selection spacing, editing in Cornerstone”. My test website is: hidden link

Many thanks for your assistance,
Cara

July 25, 2017 at 2:00 pm #1326699

Bruno

Hi,

Thank you for contacting us.

I would be very happy to help you but I didn't fully understand what is the issue.

You want the logo to appear centralized. For this, it is necessary to increase the header or realign the logo. I increased the menu height using this CSS (WPML > Languages > Additional CSS):

body .x-navbar {
	height: 85px;
}

I'll attach an image for you to see. This is what you want?

On the language selector, do you want it to be aligned exactly below?

Thank you.

July 25, 2017 at 2:10 pm #1326710

Cara Mc Donough

Hi Bruno,
Thanks for your reply.
Excellent, I've added and the logo is fine now on all browsers.
However, I have discovered that on Mobile, the menu needs to have a black background. Can you please provide the CSS code for me to add? Many thanks.

With regards to the language selector, yes the flags need to be aligned exactly below one another. At the moment the German flag seems to be aligned center.

Thanks again for your help,
Cara

July 25, 2017 at 3:26 pm #1326824

Bruno

Hi,

I added a few more CSS elements in the WPML > Languages > Additional CSS:

body .x-navbar {
	height: auto !important;
	min-height: 85px !important;
}

.wpml-ls-current-language  ul.sub-menu li {
	margin-left: -4px;
}

.x-navbar .mobile .wpml-ls-item ul {
	margin: 0 !important;
}

Note that it looks like you're using this CSS within the options of your theme as well, duplicating that code.

As I already added them in WPML > Languages > Additional CSS, you do not need to add the same codes within the options of your theme. This should work correctly.

* Remember to clear your browser's cache (desktop and mobile) if the changes are not displayed immediately.

Please, could you check if your site is working as desired?

Thank you.

July 26, 2017 at 7:04 am #1327137

Cara Mc Donough

Morning Bruno,
You're an absolute star. All working perfectly.
Really appreciate your promt and hands on assistance.

You can close the ticket.

Have a great day and thanks again,
Cara