[Resolved] Reorder Mobile Menu

[Matt Stern]

Hi Guys,

I’d like to reorder the items in this mobile menu.

The current order is Search Button, Cart Button, then Hamburger Menu Icon.

Can it be changed to Hamburger Icon, Cart Button, then Search?

Screenshot here: https://drive.google.com/file/d/1xziCsVcJxdbzEEeBCe-wd-tMWN05Y5JN/view?usp=drivesdk

Thanks!

Matt

[Leo]

Hi there,

So you want the 3 items on a different row than the logo?

If so can you disable the mobile header option first?
https://docs.generatepress.com/article/mobile-header/

Then we should be able to provide some CSS.

Let me know 🙂

[Matt Stern]

Hi Leo,

To clarify:

https://drive.google.com/file/d/1xziCsVcJxdbzEEeBCe-wd-tMWN05Y5JN/view
On this screen size (mobile?) I’d like to keep the icons under the logo, but reorder the icons to (1)Hamburger Menu Icon, (2)Cart then (3)Search.

https://drive.google.com/file/d/1_2qtMJrkR99uYux3iNzWAqMYOGqv_voq/view?usp=drivesdk
On this screensize (tablet?) I’d like to keep everything in one line as it is (logo left and icons right), but again reorder the right icons (1)Hamburger Menu Icon, (2) Cart then (3) Search.

Let me know if that makes sense.

[Leo]

Give this CSS a shot:

body #mobile-header .menu-toggle {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
}
body #mobile-header .mobile-bar-items.wc-mobile-cart-items {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
}
body #mobile-header .mobile-bar-items {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Matt Stern]

Thanks, Leo, that worked!

-Matt

[Leo]

No problem 🙂

[Author]

Posts