[Resolved] Translatepress – switcher tabs mobile & desktop

[Kumar]

Hi GP team,

Could you please help me with language switch on desktop & mobile menu

This is where I would like to display the language switch as a drop down
Desktop – https://snipboard.io/8LkHsW.jpg
Mobile – https://snipboard.io/rO6vPX.jpg

Also, can you please tell me how can I remove the word “menu” on the mobile? (Leaving only serach & hamburger icons/three lines)

I am using the latest version of GP 3.0 & GP premium.
Translation plugin – Translatepress
Their docs on the switch – https://translatepress.com/docs/settings/#language-switcher
You have three options to display language switchers on the site:
Shortcode ( Use the [language-switcher] shortcode on any page or widget. )
Menu item ( Go to Appearance -> Menus to add Language Switcher Languages in any menu. )
Floating language selection ( Have a floating dropdown following the user on every page. )

Thanks
Kumar

[David]

Hi there,

which version of GeneratePress Theme are you using? Are you using 3.0 beta ?

[Kumar]

Hi David,

GP Theme Version 3.0.0-alpha.5
GP Premium Version 1.12.0-rc.1

Thanks
Kumar

[David]

You can use a Hook Element to add the switch short code.

https://docs.generatepress.com/article/hooks-element-overview/

You will want to use the generate_menu_bar_items hook that was added to 3.0.

May need a little CSS to re-order it – happy to help with but we will need to the site once the code is added.

[Kumar]

Hi David,

I have added – links below.

Thanks
Kumar

[Leo]

Can you provide the link to your site so we can help with the CSS?

Screenshots don’t really help for cases like this.

Thanks!

[Kumar]

Looks like I hadn’t clicked generate shortcode. Now updated screen print below.

Needs tweaking.. with css for mobile and desktop.

[Kumar]

URL below.. sorry

[Leo]

Looks like it’s positioned correctly already?
https://www.screencast.com/t/0ntDSp6Y

[Kumar]

Unfortunately No.

Desktop – I would like it after search
Mobile – closer to the logo and want to remove the word “menu” (logo -space – Language – space- Serach – hamburger)

Thanks
Kumar

[Leo]

Try this CSS for desktop first:

.main-navigation .menu-bar-items {
    flex-direction: row-reverse;
}

To remove menu text on mobile, this should help:
https://docs.generatepress.com/article/mobile-menu-label/

Can you disable all of your caching plugins so I can take a closer look at the mobile code?

[Kumar]

Thats great. Desktop works perfect and as expected.

Mobile looks cluttered at the moment.

When I look in the customiser its doesn’t show text “menu” for mobile but on developer tool & mobile browser it shows the text “menu” next to the hamburger. If we remove the text – it will give us additional space so that it doesn’t break to the next line.

https://snipboard.io/dghtWb.jpg

[Leo]

Just to confirm, this field is empty for you?
https://www.screencast.com/t/hUScXusu

[Kumar]

Hi Leo,

I can confirm it is empty. Please see below:
Primary menu
https://snipboard.io/960jSW.jpg

Secondary Menu
https://snipboard.io/lWFG69.jpg

Please see below box.

[David]

I added a space to the Menu Label field. Published the changes. Then i removed the space from the Menu Label field and published changes again. This fixed the issue.

[Author]

Posts