Order of mobile navigation items

Hi there,

can you share a link to your site so i can see what CSS is required.

Hi David, thank you for your help. The page is still in development under this address:

https://b9hczzq.myraidbox.de/

By the way: in order to move the hamburger button to the right side of the mobile ("not yet stuck") navigation I added the following css:

.main-navigation:not(.slideout-navigation) .mobile-bar-items+.menu-toggle {
text-align: right;
}

which for sure is not a reliable solution and does not solve the order-problem.

Hope that helps for your investigation - thank you so much.

Best, Chris

This is an old issue with our floats system.

Have you considered switching to the new flexbox system in Customize > General?: https://docs.generatepress.com/article/switching-from-floats-to-flexbox/

It should fix this issue by default and will provide additional performance improvements.

Hi Tom, hi David,

thank you for your very fast responses. I was not aware of the importance of the new flexbox system and tried it out. I would love to stay with it, however it did not solve the problem. Maybe I need some more coding?
Right now I have the following code in the hook "generate_inside_navigation":

<?php
$languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0' );

if ( ! empty( $languages ) ) {
    echo '<div class="mobile-bar-items language">';
    foreach( $languages as $l ){
        if( ! $l['active'] ) {
            echo '<a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /> ' . '</a>';
        }
    }
    echo '</div>';
}
?>

The breakpoint is set to 1100px in Customizer > Layout > Primary Navigation. Sticky Navigation is enabled in customizer as well.

In the new Flexbox System it brings up:

- Desktop: everything correct.
- Tablet navi not stuck: Hamburger 2x to left and right side, no language switch.
- Tablet navi stuck: Hamburger 2x both to the right, no language switch.
- Mobile navi not stuck: Hamburger 1x to left side, no language switch.
- Mobile navi stuck: Hamburger 1x to right side, no language swith.

Please refer to the attached screenshot: https://ln.sync.com/dl/244a18f90/7gvxb8pw-d7gdqgpc-btd7kzb6-yxn8rjw2

or to the website on: https://b9hczzq.myraidbox.de

Thank you for any input.
By the way: Generatepress is the Best!

Best, Chris

Using the flexbox system, try adding this to the generate_menu_bar_items hook:

<?php
$languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0' );

if ( ! empty( $languages ) ) {
    foreach( $languages as $l ){
        if( ! $l['active'] ) {
            echo '<span class="menu-bar-item"><a href="' . $l['url'] . '"><img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /> ' . '</a></span>';
        }
    }
}
?>

Let me know :)

That looks promising after having deleted the old hook AND the language switcher provided by WPML via: Settings > languages > language switcher menu (this one brought the language switcher up twice).

Now Desktop is perfect.
Tablet not stuck: Hamburger 2x (left and right), language switcher correct.
Tablet navi stuck: Hamburger 2x (right and right), language swicher correct.
Mobile navi not stuck: Hamburger left (supposed to be right), language switcher present right.
Mobile navi stuck: perfect: Right side: Language switcher then Hamburger!

Please refer to the commented screenshot: https://ln.sync.com/dl/a94cd4520/rdg5av5v-4srwgneh-g9gjpeqy-kxsdhx6f

Probably now we need some css-order code?

Coming closer. You rock!

C.

Does this do it?:

.slideout-toggle.hide-on-mobile {
    display: block !important;
}

.main-navigation button.menu-toggle {
    display: none;
}

Sorry for taking some time to figure everything out - and this is only a "status report": position now is perfect on the Wordpress main language (German) - however, the language switcher does not appear on the English (translated) version. I fiddled with the translated menus and ran in some problems with WPML itself and got stuck with those.
At this point in time I need to find out why the language switcher flag does not appear on the menu. Since I assume a WPML related problem I didn't want to bother you "prematurely".
In case you might have any idea related to the above code I used I would be happy. Otherwise I first investigate WPML itself - it is not the most easy plugin, unfortunately.

Best, Chris

Yes, it can be a tricky one sometimes.

Perhaps it's the Element you've added with the switcher? Does that Element exist for all languages?

Dear Tom and Team,

thank you for guiding me into the right direction.
I had to disable all menu language switchers in WPML via Languages > Menu language switcher in order to make the above php code working correctly inside the generate_menu_bar_items hook. Then I changed the php code to not show the switcher on untranslated pages/posts via ( 'wpml_active_languages', NULL, 'skip_missing=0' ): I set skip_missing from =0 to =1.
Now everything is working great. I set this topic to "resolved" and I thank you all very much!

Best, Chris

Glad you got it working! Thanks for sharing the solution with us :)