Travelify Polylang language switcher not displayed in responsive nav menus

Travelify
1

Hi there and thanks again for the great theme.

I’ve recently updated my website to include a french version and have used Polylang for this. I placed the language switcher onto the main menu (with flags only - no text). This works great in full width screen mode but when I change to tablet or mobile mode the responsive menus don’t display the flags - the dropdown instead only displays blank menu items.

My understanding is that this is something to do with a Travelify custom menu walker not liking the fact that Polylang uses html code to display the flags.

I’ve been looking into this and can see that other people have experienced the same problem but I haven’t been able to find that anyone has posted a solution so I thought I’d ask -
Firstly is there a planned fix for this? Otherwise, is there an easy way to force the responsive menus to display the images, or alternatively to customise them (but not the main menu in full width mode) to display text instead? Perhaps via a plugin?

Another possibility I’m also looking at is coding the language switcher directly into my child theme’s functions.php. I’ve added some code to test this possibility (pasted below) but the flags are displaying above my header image and the location I’d like them to be at is below the header image but above the main menu/navigation dropdown. Can you advise how this could be achieved? (I haven’t added any CSS into this experiment as yet).

Many thanks as always for any help/advice you can provide.

// Language Switcher in header area
add_action( ‘travelify_header’, ‘language_switcher’);

function language_switcher($args) {
// outputs a flags list (without languages names)
if (function_exists(‘pll_the_languages’)) :
pll_the_languages(array(‘show_flags’=>1,‘show_names’=>0));
endif;
}

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:

In order to check your question i need to see your live website, please provide url and i will take a look

3

Hi Noda, thanks for your reply. The website is:

I’ve left both sets of flags in place for now - the first set which are bullet-pointed at the top are the coded ones that I’d like to be able to move below the header image and the flags on the main menu are the ones that don’t show properly in tablet/mobile mode.

Cheers … Helen

4

hey there

Please add this CSS in appearance - customize - additional CSS


/*language switcher*/
#branding > li.lang-item {
    display: inline-block;
    position: absolute;
    right: 14px;
    bottom: 42px;
}
#branding > li.lang-item.lang-item-first {
    right: 38px;
}
#branding {
position: relative;
}

this code will style first language switcher in the header, let me know if its good for you

Thanks!
Colorlib Support Team

5

Thanks Noda. I’ve removed the menu bar switcher for now and added the CSS for the coded header switcher. The flags have moved themselves somewhere but I’m not sure where. As far as I can tell there’s no real space between the header image and the main menu bar for them to show in - my understanding is that the white space at the bottom of the header image is because I added the CSS below (as I didn’t like the way they looked before, all pressed up together with no white space between).

.header-image {
margin-bottom: 20px;
)

I have also removed this CSS for now.

Unfortunately I’m no expert at CSS so to pursue this solution I still need your help! Thanks again.

6

I know where they are :slight_smile:

in the provided code, change the “bottom” to “top” and let me know results

7

Thanks Noda - I was hoping to get them below the header image but they look pretty good up there where they are, so I’ll say thanks again for your expertise and good night! Cheers … Helen

8

You are welcome :slight_smile:
Nice, to hear your problem is fixed:)
Now I will now close the topic and mark it as resolved. Feel free to contact us again Thanks!