[Support request] Wpml translation flags: is it possible to have these next to the menu toggle?

Hi Kayleigh,

Yes, it’s possible. Based on this article, you can hook the Language switcher through PHP or its shortcode: https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#custom-locations

For instance, you may create a Hook Element with hook generate_menu_bar_items as such: https://share.getcloudapp.com/geumYZP1

or: https://share.getcloudapp.com/d5u9bY24

Then after you’ve added it as such, if you can provide the link to the site in question, we can use custom CSS to adjust its position and visibility if needed.

Here is a thread which may help as well: https://generatepress.com/forums/topic/generatepress-hooks-to-add-wpml-menu-switcher-next-to-toggle-on-mobile/

Hope this helps. 🙂

Hi there,

can you edit the Header Widget and make sure there is no Empty Paragraph before the shortcode.

Ok, its not uncommon for WP to insert empty Paragraphs with shortcodes.
Add this CSS to remove the space its creating and to align the flag icon:

.header-widget .widget p {
    margin-bottom: 0;
}

Add this CSS to center the hamburger:

.mobile-menu-control-wrapper {
    margin-right: auto;
}

You’re welcome

No apologies necessary – we’re more then happy to help 🙂

Try adding this CSS:

@media (max-width: 768px) {
    .site-heasder .inside-header {
        justify-content: center;
    }
    .site-logo {
        flex-basis: 100%;
        text-align: center;
    }
    .site-logo img {
        width: 200px !important;
    }
    nav.mobile-menu-control-wrapper {
        margin-left: unset;
    }
    .main-navigation + .main-navigation {
        order: 50;
    }
    .site-header .header-widget{
        flex-basis: auto !important;
        margin: unset !important;
    }
}

It will position the Hamburger left and the Flag to the Right. And center the logo and set its width to 200px.

Also if you need – you can reduce the Customizer > Layout > Header > Padding just for mobile if need be.