[Resolved] Order of mobile navigation items

[Christian]

Hi Support Team,

having searched the Support Forum and tried a lot of different code now I need your advice: I am using the latest versions of GP and GPpremium. Trying to set the order of items inside the mobile navigation (breakpoint 1100px) I see different order of items on stuck and “not-stuck” navigation. What I need to achieve is the same order in mobile navigation stuck and not stuck. Please see the two commented screenshots:

If you help me out with the correct code snippets I am very grateful.

Thank you for your consideration,
Best, Chris

[David]

Hi there,

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

[Christian]

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

[Tom]

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.

[Christian]

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

[Tom]

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 🙂

[Christian]

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.

[Tom]

Does this do it?:

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

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

[Christian]

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

[Tom]

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?

[Christian]

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

[Tom]

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

[Author]

Posts