[Resolved] reposition menu item to top on slideout only

[drew]

I’ve been working with trying to find an elegant way to reposition menu items between desktop and slideout menus without having to create two separate menus (which is always asking for disaster – clients never remember).

Right now, I’m getting it to work with a combination of custom CSS class for the menu items but that feels like a really clunky solution.

Are you aware of a way to reposition menu items other than using display: none; and media queries?

Example of what I’m doing: the “Buy Tickets” is far right on desktop but needs to be located at the top on mobile: https://www.screencast.com/t/4vvUnHZd7Ao

[Leo]

Hi there,

Your method should be good.

Or you can use the built in hide on classes: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[drew]

Acknowledged and thanks.

That all seems focused on show/hide but what about re-ording without having to create duplicate versions of menu items?

[Leo]

Since you aren’t using slideout navigation on desktop, you can create a menu and assign to primary navigation, then create a second menu and assign to slideout navigation.

[drew]

Gotcha, that’s what I was hoping to avoid.

Any solutions in the pipeline that don’t require creating multiple versions of the menu?

[Leo]

No that will require some complicate coding I think.

[David]

You can try using a flex container on the slide out navigation and then assign an order to the menu items.

.slideout-navigation .slideout-menu {
    display: flex;
    flex-flow: column nowrap;
}

And then give the menu item you want at the top a class with the property: order: -1;

That will push it to the top.

[drew]

That’s a really good idea David, thanks. I’m not as fluent with flex as I should be and I thought it wasn’t 100% compatible with all major browsers at all media queries but I can look that up easily enough.

[Author]

Posts