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.
Share Improve this question asked Nov 6, 2018 at 2:14 HenshallHenshall 1132 silver badges12 bronze badges1 Answer
Reset to default 0It'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.