I cannot seem to figure out why this menu is in reversed order only for Mobile.


<div class="menu-container">
    <div class="menu w-full mx-auto container xl:pr-16">
        if (wp_is_mobile()) {
            wp_nav_menu( array( 'menu' => 'nav' ) );
        } else {
            wp_nav_menu( array( 'menu' => 'nav' ) );


class WalkerNav extends Walker_Nav_Menu {

    function start_lvl( &$output, $depth = 1, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class='sub-menu'><div id='megatron'>\n";
    function end_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "$indent</ul></div>\n";


enter image description here

Basically, on the mobile layout, Pos 6 needs to be first like the desktop and needs to be at the top for Mobile. It is a single menu.

Any help would be much appreciated.



1 Answer 1


It's a little bit of guessing, but...

I'm pretty sure it's just a CSS problem.

The real order of your menu items is P1, P2, P3, and so on. And thus this is the order on mobile devices.

On desktop, the order is changed, because there is float: right assigned to menu items, so they do exactly that.

The easiest way to solve it will be changing the CSS for desktop menu.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.