Skip Navigation

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

Last updated by stevenV-3 6 years, 5 months ago.

Assigned support staff: Bruno.

Author Posts
February 19, 2014 at 5:02 pm #343533

stevenV-3

I installed the WPML plugin today and tried to put the language chooser in the menu. this works fine, although I want to have the 3 flags of language horizontal (like they are shown in footer, see image "WPML footer"). I choose this option in the menu languages of the WPML plugin and the preview shows correctly 3 flags, but it doens't show correctly in menu on my website (see image WPML menu).

Also, I would like to have 3 flags that are shown below in page in the grey part of footer, so not in white part as it is now. Anyone who can help me with this 2 problems? Thanks in advance!

February 19, 2014 at 5:03 pm #343538

stevenV-3

oh yeah, maybe I should give the address of website in construction: hidden link

🙂

February 19, 2014 at 5:52 pm #343597

Bruno

Dear Steven,

First you have to find what is the menu ID. To do this, open the functions.php file of your theme and look for lines like this:

register_nav_menu( 'primary', __( 'Primary Menu', 'twentytwelve' ) );

In this example, the id of the menu is 'primary'. So add this function into functions.php:

function new_nav_menu_items283238($items,$args) {
	if (function_exists('icl_get_languages') && $args->theme_location == 'MENU_ID_HERE') {
		$languages = icl_get_languages('skip_missing=0');
		if(1 < count($languages)){
			foreach($languages as $l){
				$items = $items.'<li class="menu-item-'.$l['language_code'].'"><a href="'. $l['url'].'"><img src="' . $l['country_flag_url'] . '" alt="'.$l['native_name'].'"></a></li>';
			}
		}
	}
	return $items;
}
add_filter( 'wp_nav_menu_items', 'new_nav_menu_items283238',10,2 );

Look the string 'MENU_ID_HERE'. You should replace it with the ID of the menu, for example:

...
... $args->theme_location == 'primary'
... 

On the second issue, please, click on WPML > Languages. Look for 'Additional CSS' and insert it:

#lang_sel_footer { border:none !important; background-color: transparent !important; position: relative; top: -45px;}

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Thank you.

February 20, 2014 at 9:01 am #343904

stevenV-3

Hi Bruno,

Wauw, thanks for the fast and accurate help! It all works 🙂
Just one more thing you could help me with: is it possible to create some space between menu titles and the 3 flags? I tried with padding and margin but it affects all flags individually.
Thanks in advance and also thanks again for your great service!

February 20, 2014 at 11:21 am #344065

stevenV-3

And some other little detail: iif you hover over the flags in the menu the language doesn't pop up like in the footer, although in WPML settings preview it does pop up, also for menu... any solution?
Thanks in advance!

February 20, 2014 at 2:25 pm #344261

Bruno

Dear Steven,

I'm glad it worked. 🙂

I tried accessing your site to verify, but the pages are appearing blank. Please could you check?

Thank you.

February 20, 2014 at 2:46 pm #344297

stevenV-3

oh yeah, I'm sorry, I was trying some settings atm, I made different folder for standard language, but I undid it just now...

There is another problem occuring now: the button ('top' or 'boven' or 'haut' in other languages) in footer at right side isnt working anymore since the flags are in the footer...

February 20, 2014 at 3:03 pm #344332

Bruno

Dear Steven,

To fix the spacing problem on the menu, add this code within the WPML > Languages​​ > Additional CSS:

.menu-item-nl, .menu-item-fr, .menu-item-en { margin:0 5px !important; }

To have the menu with pop-up, replace the foreach code above for this:

            foreach($languages as $l){
                $items = $items.'<li class="menu-item-'.$l['language_code'].'"><a href="'. $l['url'].'"><img src="' . $l['country_flag_url'] . '" alt="'.$l['native_name'].'" title="'.$l['native_name'].'"></a></li>';
            }

For the footer function properly, replace the code in WPML > Languages​​ > Additional CSS for this:

#lang_sel_footer { width: 140px; margin: 0 auto; border:none !important; background-color: transparent !important; position: relative; top: -45px; }

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Thank you.

February 20, 2014 at 3:47 pm #344373

stevenV-3

Hi again Bruno,

This works great, thanks!

I had to modify the code a bit so that it works as I want:
.menu-item-nl { margin:0 0 0 50px !important; }

@media only screen and (max-width: 767px) {
.menu-item-nl, .menu-item-fr, .menu-item-en { margin:10px 0 10px 0 !important;}
}

But you helped me very good ont he way! 🙂

The footer problem is solved also, so thanks again!

February 20, 2014 at 4:08 pm #344391

stevenV-3

hmm I discovered a little hiccup with the modifications: The menubar became larger (so higher I mean) than before... I tried to take out all the custom css code to check what is causing the problem, but it stays the same. Is it possible that the modifications of functions.php file is causing this? Thanks in advance!