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

Last updated by Noman 1 year ago.

Assigned support staff: Noman.

Author Posts
September 9, 2018 at 7:32 pm

alexanderW-39

I am trying to:
Change the width of built in language switcher in my theme enfold. As I only displays flags it should be smaller.
In your tutorial I found this CSS code:
"
li.wpml-ls-menu-item ul li a {
width: auto;
}
"

Tried both: adding it to additional CSS at language switcher options and themes custom css. does not work..

Link to a page where the issue can be seen:
/home/ of the above selected site

September 11, 2018 at 9:17 am #2722988

Noman
Supporter

Languages: English (English )

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

Hi,

Thank you for contacting WPML Support. You can fix this issue by adding following CSS in your theme’s or child theme style.css file OR Custom CSS section of the theme:

#top .sub_menu li.wpml-ls-item ul {
    width: 60px;
}

And it will look as in attached screenshot.

Thank you

September 11, 2018 at 12:08 pm #2723660

alexanderW-39

Hi,
first of all thanks for your help.
I added your CSS but its still not ideal.
First of all it should look like its done in your turotial at
https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/
I also added the screenshot what I want to achieve.
Second thing is: I was not able to get the background from green to transparent/white (if you scroll a bit down you will see the header is transparent in beginning but later on white).

Would be great if you could help me here.

Best regards!

September 11, 2018 at 12:10 pm #2723707

alexanderW-39

Also added now a screenshot how it looks like after I added your CSS and did hard reload + cache refresh at my laptop in google chrome

September 11, 2018 at 3:28 pm #2724438

Noman
Supporter

Languages: English (English )

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

Hi,

I have visited your site home page but it’s not showing any content or transparent header as you can see in attached screenshot. You can change drop-down background color to white by using following CSS:

#top #header_meta nav ul li.wpml-ls-item ul li, 
#top #header_meta nav ul li.wpml-ls-item ul a, 
#top #header_meta nav ul li.wpml-ls-item ul {
	background-color: #fff !important;
	border:none;
}

And it will look as in attached screenshot. Transparent background was showing background content (search arrow) as in attached screenshot.

Thank you

September 12, 2018 at 10:06 am #2727091

alexanderW-39

Hi Noman,

as written in initial request please see at /home/ there you will find content in English and French.
I added your code now but I still have the problem:
The drop down is too wide, it should exactly look like its done in the screen.JPG I attached 2 Posts above. Moreover if you check we the menu you will see: in the beginning the whole menu is transparent, if you scroll down it gets white. So in the beginning the drop down should also be transparent and later on white. I hope you understand but I am sure you will see once you visit /home and also see my now attached screenshot.
So please help me
- fixing the size of dropdown
- fixing colours
- and also please remove the screenshots of your last post where others can see our company name

Thanks

September 12, 2018 at 1:37 pm #2727719

Noman
Supporter

Languages: English (English )

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

Hi,

I have added following CSS in Appearance >> Customize >> Additional CSS section of your theme.

#top .av_header_transparency #header_meta nav ul li.wpml-ls-item ul li, 
#top .av_header_transparency #header_meta nav ul li.wpml-ls-item ul a, 
#top .av_header_transparency #header_meta nav ul li.wpml-ls-item ul {
	background-color: transparent !important;
	border:none;
	z-index:99;
	box-shadow:none
}

#top .sub_menu li.wpml-ls-item ul {
    width: 50px;
    left:-7px;
}

#top ul ul li.wpml-ls-item a {
    padding-left:0 !important;
  padding-right: 0 !important;
  text-align: center !important;;
}

And now it looks as in attached screenshots. Also I have removed screenshots of my previous message.

Thank you

September 16, 2018 at 8:34 pm #2739180

alexanderW-39

Hi,

yes it looks like in my last attached post but not as in the attached screen.jpg which is from you official website. Please have a look at it and send me updated CSS so it looks exactly like on your documentation page, thanks 🙂

September 17, 2018 at 4:01 pm #2741753

Noman
Supporter

Languages: English (English )

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

Hi,

Our official site showing language switcher dropdown style from some other theme (twentysixteen). WPML just injects the “language switcher” HTML structure into your site and styling comes from theme. This allows the language switcher to look better on your site.

At the moment, Language switcher dropdown styling in your site is according to your theme dropdown style. If u want more styles, you can request your theme author to add.

Thank you

The topic ‘[Closed] Enfold – width of built in language switcher (second menu) does not work’ is closed to new replies.