[Resolved] Off canvas menu icon order

[Ivan]

Hi guys

I tried to no open a ticket because I think this has to be already resolved but I can not find it, how to reorder the position of off canvas menu icon? I mean I want to have it as first icon in the navigation menu instead the last.

Thanks!
Br
Ivan

[Leo]

Hi there,

Try this CSS:

.main-navigation .mobile-bar-items {
    order: 4;
}

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

Let me know if this helps 🙂

[Ivan]

mm can’t see any change :S.

[Tom]

Give this a shot:

@media (min-width: 769px) {
    #primary-menu > ul {
        display: flex;
    }

    .slideout-toggle {
        order: -1;
    }
}

[Ivan]

Thank you Tom, but not working so I think has to be a conflict with some of the other css or some configuration I have because there are no changes when I put your codes.

[Ivan]

ops! I found the problem, sorry I had an extra } in the field 🙂

Now let me introduce and extra question. On desktop I have Primary Navigation + Off canvas, the off canva menu button is like any other button on the primary menu. On desktop that´s fine but on mobile only appears the Off canvas, if I extend the mobile breakdown then I lose the mobile Icon and the all menu appear on two columns… so do you have a way to “merge” both menu on mobile? Not sure if its clear…

Thanks in advance again

[David]

Hi there,

the simplest way would be to add a Navigation Widget to the Off Canvas Panel and use that to display your Primary Navigation. Then we can provide some CSS to hide it on desktop etc.

[Ivan]

That would be great, I added the menu but looks a but “ugly”. As you can see the buttons appear in one line. Also I would like to have it at the beginning and if we can add some “free” text before at the beginning of the off canvas menu would be great, now i can only add pages,categories, etc, but not any HTML, I mean like in any menu.

https://pasteboard.co/J4xEbEt.jpg

Thank you so much
Br
Ivan

[David]

Try this CSS:

.slideout-navigation .slideout-widget .menu li {
    display: block;
    line-height: 2em;
}

.slideout-navigation .inside-navigation {
    display: flex;
    flex-direction: column-reverse;
}

You can insert another Widget in the Off Canvas Panel to display your ‘free’ text.

And if you want to hide the primary nav in the slideout on desktop only then add this:

@media(min-width: 769px ) {
    .slideout-widget.widget_nav_menu {
        display: none;
    }
}

[Ivan]

Hi guys,

Thank you for everything this works wonderful, let me ask for a very small request just to finish my design 🙂

https://pasteboard.co/J4Hgico.jpg

1.- How can I reduce the space between the new widget “Text” (Categorias) and the first category (Todos los productos).

https://pasteboard.co/J4Hhceg.jpg

2.- On mobile can we also change the order between the Cart icon and the Off canvas panel button?

Thank you much again! This forum its wonderful
Br
Ivan

[Leo]

1. Can you open a new topic for this as it’s unrelated to this topic?

2. Try this:

.main-navigation .mobile-bar-items {
    order: 4;
}

[Ivan]

Thank you Leo! The fix works wonderful. I also opened the ticket for the other issue.

https://generatepress.com/forums/topic/fix-off-canvas-menu/

Thank you for your help!

[Leo]

No problem 🙂

[Author]

Posts