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

Hi there,

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

Let me know :)

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

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;
    }
}

Thanks a lot David for helping noobs :)

Regards,
Ricardo

Glad we could be of help

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!

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;
}

Beautiful!

Thank you so much for your generosity.

Regards,
Ricardo

You are welcome :)