How to place WMPL language switcher near the menu icon on mobile header

This topic has 9 replies, 4 voices, and was last updated 4 years ago by Ying.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
March 5, 2022 at 4:06 pm #2143858

Ricardo

Hi,

I’ve been reading some questions in this forum about this topic, but cannot find any answer to this question:

How can I have a WPML language switcher on mobile header near the hamburguer menu icon?

Thank you very much for your help.

March 5, 2022 at 5:00 pm #2143882

Leo
Staff
Customer Support

Hi there,

Can you try this method first?
https://docs.generatepress.com/article/generate_menu_bar_items/

Let me know 🙂

March 11, 2022 at 5:56 am #2150688

Ricardo

Hi Leo,

Thank you for your reply.

I tried that method but it doesn’t affect the mobile header.

Only the desktop. You may see that here:

https://wordpress-262052-2437317.cloudwaysapps.com/

I’m really lost here. Any help would be appreciated.

Thanks

March 11, 2022 at 6:14 am #2150707
David
Staff
Customer Support
Hi there,

try adding this CSS:
```
@media (max-width: 1024px) {
    .main-navigation .menu-bar-items ul {
        display: block;
    }
    .menu-bar-items .wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer {
        margin-bottom: 0;
    }
}
```
March 11, 2022 at 8:37 am #2150985

Ricardo

Thanks a lot David for helping noobs 🙂

Regards,
Ricardo

March 11, 2022 at 8:53 am #2151003

David
Staff
Customer Support

Glad we could be of help

March 11, 2022 at 2:18 pm #2151374

Ricardo

Hi,

Regarding this topic, I would like just ask one more thing:

How can I reduce the width of the area of the language switcher? I think that it’s simply ocupying the area that generatepress provides, but I’m not sure. I would like it to be much smaller and right aligned.

Thank you very much!

March 11, 2022 at 4:46 pm #2151458
Ying
Staff
Customer Support
Hi Ricardo,

The width of the language switcher is controlled by the plugin, you can see the CSS here:
https://www.screencast.com/t/S3NmzsfQ

However, you can add this CSS to override the plugin’s original CSS:
```
.menu-bar-items .wpml-ls-legacy-dropdown {
    width: 120px;
}
```
March 11, 2022 at 11:48 pm #2151642

Ricardo

Beautiful!

Thank you so much for your generosity.

Regards,
Ricardo

March 12, 2022 at 12:08 pm #2152320

Ying
Staff
Customer Support

You are welcome 🙂
Author

Posts

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

[Resolved] How to place WMPL language switcher near the menu icon on mobile header

Popular Articles

[Resolved] How to place WMPL language switcher near the menu icon on mobile header

Popular Articles

Start building better websites today.