Altitude Pro Navigation with WPML Flag Language Selector

[Vasilis]

Hey awesome people,

I'm trying to add a flag language selector function from WPML on my Altitude Pro theme.

Did some research and came up to this function which seems to work ok, but needs a small detail to be perfect.

The website is => http://cleancar.me

The function I've been using to show the flag language selector near the navigation bar is below:

//* Flags Language Selector WPML
add_filter( 'genesis_nav_items' , 'flags_selector' , 10 , 2 );
add_filter( 'wp_nav_menu_items' , 'flags_selector' , 10 , 2 );
function flags_selector($menu, $args){
$args = (array)$args;
$flags = '';
if ( $args['theme_location'] != 'primary' )
return $menu;
$lang = icl_get_languages('skip_missing=0&orderby=code');
if( !empty($lang) ) {
$flags .= '<div id="flags-selector">';
foreach( $lang as $l ) {
$flags .= '<div class="flag-item">';
if( !$l['active'] )
$flags .= '';
$flags .= '<img src="'. $l['country_flag_url']
. '" height="12" alt="' . $l['language_code']
. '" width="18" title="' . $l['translated_name']
. '" />';
if ( !$l['active'] )
$flags .= '';
$flags .= '</div>';
}
$flags .= '</div>';
}
return $menu . $flags;
}

And here is the CSS I'm using for this:

/* Flag Language Selector
------------------------------------------------------------ */

#flags-selector {
float: right;
padding-top: 5px;
}

.flag-item {
display: inline;
padding: 4px;
}

I would like to place the flags next to each other and all of them after the last button of the navigation bar

WPML documentation suggests this:

function language_selector_flags(){
$languages = icl_get_languages('skip_missing=0&orderby=code');
if(!empty($languages)){
foreach($languages as $l){
if(!$l['active']) echo '';
echo '';
if(!$l['active']) echo '';
}
}
}

which does not work....

Any ideas on this would be highly appreciated!

Kind Regards

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

http://http//cleancar.me

[Erik D. Slater]

It's the CSS for .genesis-nav-menu a that's screwing you up a bit here.

Keep #flags-selector as you currently have it.

Replace .flag-item with the following:

.flag-item {
	float: left;
}

.flag-item a {
	padding-top: 4px;
}

Then tweak as required 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Vasilis]

AWESOME!

Thank you Erik!!!

That did the trick.

Do you know how I can fix the scrolling black navigation bar after this?

Try scrolling down and see how the flags change position again...

Kindly appreciated!

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. Slater]

HAH!! Didn't spot that one 🙂

In the code I proposed for .flag-item a, change padding-top: 4px; to padding-top: 4px !important;

Sorry about that 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Vasilis]

Ok that fixed the second flag,

Still both of them scroll down as a whole,

Should I add the same code to the first part of the CSS , #flags-selector...etc

THANK YOU!!!

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. Slater]

Riiiiiiiight 🙂

Give this a whirl:

.site-header.dark #flags-selector {
	padding-top: 17px;
}

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Erik D. Slater]

Also, lines 164 to 168 in style.css (the transition definitions) ... add #flags-selector to that list, i.e.

a,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button,
.site-header.dark,
#flags-selector {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}


---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Vasilis]

KINDLY APPRECIATED!!!

Added all of the new CSS lines.

Unfortunately no result...

Any ideas?

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. Slater]

For #flags-selector, padding-top: 27px !important; needs to be padding-top: 27px;. The !important bit here is preventing the magic from happening 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Vasilis]

Awesome DONE!

I can't express how much I thank you 🙂

---

Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group

[Erik D. Slater]

Thanks man 🙂

Of course ... there is still your Simple Social Icons issue to sort out ...

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Kitty]

I am trying to find out if Altitude Pro is compatible with WPML. Can you confirm that?

[Erik D. Slater]

ellafitz: By "WPML", are you referring to the https://wpml.org/ plugin?

Also, this may help: https://wpml.org/forums/topic/using-the-studiopress-genesis-altitude-pro-child-theme/.

Generally speaking, there shouldn't be an issue with multilingual support for the Genesis child themes.

Was there something specific that you were looking at or found, and which you think might be an issue?

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Kitty]

Hi Erik,
Yes I mean WPML.org

Home

And I do have an issue: on activating WPML plugin my blogposts and pages do not show up in de admin.
Only content from widgets are shown.

If I deactivate WPML Multilingual CMS they appear again in admin and in frontend.

Could you please assist?
Or should I perhaps enter a new ticket?
Regards,
Kitty

[Erik D. Slater]

Or should I perhaps enter a new ticket?

Yessy ... since this will allow others to contribute to the discussion 🙂

---

Erik D. Slater: Digital Platform Consultant • LinkedIn

[Author]

Posts