theme development - Menu is in Reversed order

admin管理员组

文章数量:1130349

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

site-navbar.php

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

nav.php

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

}

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.

Regards,

Jake.

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

site-navbar.php

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

nav.php

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

}

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.

Regards,

Jake.

• theme-development
• menus
• responsive

Share Improve this question asked Nov 6, 2018 at 2:14 HenshallHenshall 11322 silver badges1212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

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

site-navbar.php

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

nav.php

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

}

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.

Regards,

Jake.

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

site-navbar.php

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

nav.php

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

}

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.

Regards,

Jake.

• theme-development
• menus
• responsive

Share Improve this question asked Nov 6, 2018 at 2:14 HenshallHenshall 11322 silver badges1212 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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.

本文标签： theme developmentMenu is in Reversed order