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.

You are not logged in. You can view support threads, but not post.
If you are already logged in, please refresh your browser.

Tagged: 

This topic contains 12 replies, has 2 voices, and was last updated by  Anne-Sophie 2 years, 11 months ago. The support staff assigned to this topic is Bruno.

Author Posts
Author Posts
June 20, 2014 at 12:03 pm #422470

Anne-Sophie

Hello!

In the website I'm currently building, I wanted to have the languages displaying inline in a top menu, so I added to my child functions.php:

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

I'm just wondering:
- How can I set a different color for the running language? --The default is set to CAT, but the letters appear grey, just as the rest.
- If a page doesn't have a translation, how can I hide the language from the menu?

Any help would be much appreciated!
Thank you in advance,

Anne-Sophie de Vargas

June 20, 2014 at 12:33 pm #422494

Anne-Sophie

Edit: I know that by setting

skip_missing

to 1, it shows only the translated pages, but on some pages that are only in the default language, the language menu disappear, and I need to have it always visible, even if there is only one language. Thank you!

June 20, 2014 at 2:13 pm #422571

Bruno
Forum moderator

Supporter languages: English (English ) Portuguese (Brazil) (Português )

Supporter Timezone: America/Sao_Paulo (GMT-03:00)

Dear Anne-Sophie,

The function below will add a class ( current-language ) so you can manipulate the link that the site is being viewed:

function new_nav_menu_items($items,$args) {
    if (function_exists('icl_get_languages') && $args->theme_location != 'top-menu') {
        $languages = icl_get_languages('skip_missing=0');
        if(1 <= count($languages)){
            foreach($languages as $l){
            	$current = ( $l['active'] ) ? ' current-language' : '';
                $items = $items.'<span>&#124;</span><li class="menu-item-'.$l['language_code'].$current.'"><a href="'. $l['url'].'">'.$l['native_name'].'</a></li>';
            }
        }
    }
    return $items;
}
add_filter( 'wp_nav_menu_items', 'new_nav_menu_items',10,2 );

In WPML > Languages​​. Look at 'Additional CSS' add this line:

.current-language a { color: #fff; }

In the example above I am using the white color "#fff". You can change and use the color that you want.

The above function also solves the second issue.

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.

June 20, 2014 at 5:14 pm #422692

Anne-Sophie

Hi Bruno!

Nice to see again 🙂

I've changed it with the code you gave me but it still doesn't work properly...
- the languages are now appearing too in the sidemenu
- in the homepage, if you switch to another existing language, the menu disappear
- couldn't get the current show in another color

Mi CSS for this menu is bar is

.langmenu { background-color: #000; padding-top: 2px; padding-bottom: 1px; width: 100%; }
.langmenu span { display: none; }
.langmenu ul { list-style: none; list-style-image: none; margin-top: 4px; margin-bottom: 4px; margin-left: auto; margin-right: auto; padding-right: 90px; text-align: right; }
.langmenu li { display: inline; padding-left: 8px; padding-right: 8px; line-height: 20px; }
.langmenu ul li a { font-size: 13px; color: #fff; font-family: 'Raleway', sans-serif; font-weight: 600; text-transform: uppercase; color: #777; }
.langmenu ul li a:hover { color: #00b5b5; text-decoration: none; }

I've tried with what you told me, and also with the class showing with the inspector,

.li.menu-item.menu-item-language.menu-item-language-current a

but it didn't make it either... So, for the moment I set it back how it was.

Do you have a clue where the proble can be? The theme is Lush http://themeforest.net/item/lush-music-band-musician-wordpress-theme/7293614 that is normally compatible with WPML... If you need access, I can send it to you.

Best regards,
Anne-Sophie

June 20, 2014 at 7:14 pm #422755

Anne-Sophie

Hi again!

Also, there is something really strange happening. In my main language, catalan, I have in the menu for example a page called "Contact" that goes to http://www.mydomain.com/contact and another item called "Newsletter" that goes to http://www.mydomain.com/contact/#anchor2, another point into the page. When I click on Contact, the page opens fine, but when I go to Newsletter, the language menu disappear. I'm really confused about it! Do you know what it could be due to?

Thank you in advance.
Best regards,

Anne-Sophie

June 23, 2014 at 10:21 pm #423875

Bruno
Forum moderator

Supporter languages: English (English ) Portuguese (Brazil) (Português )

Supporter Timezone: America/Sao_Paulo (GMT-03:00)

Dear Anne-Sophie,

I'll ask for some information so I can verify the problem. The fields for you to insert the credentials will be below its comment field.

Please let me know exactly what steps should I follow to see the problem.

Note: Please make a full backup of your site.

Thank you.

June 25, 2014 at 8:51 am #424837

Anne-Sophie

Hello Bruno,

The site is calantiga.org but I have replicated it on a temporal site.
Please find the information below.

Best regards,
Anne-Sophie

June 26, 2014 at 1:28 am #425347

Bruno
Forum moderator

Supporter languages: English (English ) Portuguese (Brazil) (Português )

Supporter Timezone: America/Sao_Paulo (GMT-03:00)

Dear Anne-Sophie,

Thanks 🙂

When I try to edit your site, I am redirected to another URL: http://calantiga.org/

Thus, even if I make changes, I can not to see.

Please could you check?

Thank you.

June 26, 2014 at 8:32 am #425597

Anne-Sophie

Hi Bruno,

So sorry, I don't know why and how, but all the pages were in the trash!! I've removed the redirección in page 404. Note that you can access the menu on the blue & black logo on the top right --the client wanted to have something very minimal...

Best regards,
Anne-Sophie

June 27, 2014 at 1:22 am #426198

Bruno
Forum moderator

Supporter languages: English (English ) Portuguese (Brazil) (Português )

Supporter Timezone: America/Sao_Paulo (GMT-03:00)

Dear Anne-Sophie,

On the function file of your theme, I added these two lines within the "new_nav_menu_items" function.

$current = ( $l['active'] ) ? ' current-language' : '';
$items = $items.'<span>&#124;</span><li class="menu-item-'.$l['language_code'].$current.'"><a href="'. $l['url'].'">'.$l['native_name'].'</a></li>';

I added this line in style.css of your theme:

/* WPML Current Menu */
.current-language a { color: #00b5b5 !important; }

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.

June 27, 2014 at 7:58 am #426358

Anne-Sophie

Hello Bruno,

Thank you very much! 🙂 As I could see, it's the code you gave me before, but somehow it was not working properly when I did it first. Just one more thing: I've noticed that on Chrome and Safari the fixed bottom dissapear on the page there is the language menu (but on Firefox and Explorer it looks OK): did I place it correctly in the header on line 14?

<?php
$fixed_header = (bool)get_iron_option('enable_fixed_header') ? 'fixed_header' : '';
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo('charset'); ?>">
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0">
	<title><?php wp_title('—', true, 'right'); ?></title>
	<?php wp_head(); ?>	
</head>

<body <?php body_class("layout-wide ".$fixed_header); ?> onload="jQuery('header').animate({'opacity': 1})">
<div class="lang-menu"><?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'container_class' => 'langmenu' ) ); ?></div>
	<div id="fb-root"></div>

	<div id="overlay"></div>
	<div class="side-menu">
		<div class="menu-toggle-off"></div>

		<a class="site-title" rel="home" href="<?php echo home_url('/'); ?>">
		<?php if(get_iron_option('menu_logo') != ''): ?>
			<img class="logo-desktop regular" src="<?php echo esc_url( get_iron_option('menu_logo') ); ?>" data-at2x="<?php echo esc_url( get_iron_option('retina_menu_logo') ); ?>" alt="<?php echo esc_attr( get_bloginfo('name') ); ?>">
			<img class="logo-mobile regular" src="<?php echo esc_url( get_iron_option('menu_logo') ); ?>" data-at2x="<?php echo esc_url( get_iron_option('retina_menu_logo') ); ?>" alt="<?php echo esc_attr( get_bloginfo('name') ); ?>">
		<?php endif; ?>
		</a>
		
			<!-- panel -->
			
			<div class="panel">
				<a class="opener" href="#"><i class="icon-reorder"></i> <?php _e("Menu", IRON_TEXT_DOMAIN); ?></a>

				<!-- nav-holder -->
				<div class="nav-holder">

					<!-- nav -->
					<nav id="nav">
	<?php if ( get_iron_option('header_menu_logo_icon') != '') : ?>
						<a class="logo-panel" href="<?php echo home_url('/'); ?>">
							<img src="<?php echo esc_url( get_iron_option('header_menu_logo_icon') ); ?>" alt="<?php echo esc_attr( get_bloginfo('name') ); ?>">
						</a>
	<?php endif; ?>
						<?php echo preg_replace('/>\s+</S', '><', wp_nav_menu( array( 'theme_location' => 'main-menu', 'menu_class' => 'nav-menu', 'echo' => false, 'walker' => new iron_nav_walker() ))); ?>
					</nav>
					<div class="clear"></div>
					
					<div class="panel-networks">
						<?php get_template_part('parts/networks'); ?>
						<div class="clear"></div>
					</div>
					
				</div>
			</div>
		
	</div>

	<?php if(!$fixed_header) : ?>	
	<div id="pusher">
	<?php endif; ?>
		
	<header class="opacityzero">
		<div class="menu-toggle">
			<i class="fa fa-bars"></i>
		</div>
		<?php get_template_part('parts/top-menu'); ?>

		<?php if( get_iron_option('header_logo') != ''): ?>
		<a href="<?php echo home_url('/');?>" class="site-logo">
		  <img id="menu-trigger" class="logo-desktop regular" src="<?php echo esc_url( get_iron_option('header_logo') ); ?>" data-at2x="<?php echo esc_url( get_iron_option('retina_header_logo') ); ?>" alt="<?php echo esc_attr( get_bloginfo('name') ); ?>">
		</a>
		<?php endif; ?>
	</header>
	
		
	<?php if($fixed_header) : ?>	
	<div id="pusher">
	<?php endif; ?>
	

		<div id="wrapper">

Best regards,
Anne-Sophie

June 27, 2014 at 9:55 pm #426838

Bruno
Forum moderator

Supporter languages: English (English ) Portuguese (Brazil) (Português )

Supporter Timezone: America/Sao_Paulo (GMT-03:00)

Dear Anne-Sophie,

I added these two lines in the style.css file of your theme:

.lang-menu { position: fixed; z-index: 999999; display: block; width: 100%; }
header { position: relative; top: 31px; }

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.

June 30, 2014 at 8:32 am #427338

Anne-Sophie

Hello Bruno,

Thank you so much!! Now it appears perfectly on laptop --on iPhone, the bottom is still missing 🙁 I will check with the theme author... Thank you again for your kind help!

All the best,
Anne-Sophie

You are not logged in. You can view support threads, but not post.
If you are already logged in, please refresh your browser.