[Resolved] reposition menu item to top on slideout only

Home Forums Support [Resolved] reposition menu item to top on slideout only

Home Forums Support reposition menu item to top on slideout only

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #519639
    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

    GeneratePress 2.0.2
    GP Premium 1.5.6
    #519922
    Leo
    Staff
    Customer Support

    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

    #519930
    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?

    #520188
    Leo
    Staff
    Customer Support

    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.

    #520210
    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?

    #520244
    Leo
    Staff
    Customer Support

    No that will require some complicate coding I think.

    #520289
    David
    Staff
    Customer Support

    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.

    #520585
    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.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.