[Resolved] Off canvas menu icon order

Home Forums Support Off canvas menu icon order

  • This topic has 12 replies, 4 voices, and was last updated 12 months ago by Leo.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1244623
    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

    #1244671
    Leo
    Staff
    Customer Support

    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 🙂

    #1244709
    Ivan

    mm can’t see any change :S.

    #1244826
    Tom
    Lead Developer
    Lead Developer

    Give this a shot:

    @media (min-width: 769px) {
        #primary-menu > ul {
            display: flex;
        }
    
        .slideout-toggle {
            order: -1;
        }
    }
    #1245038
    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.

    #1245044
    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

    #1245138
    David
    Staff
    Customer Support

    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.

    #1245310
    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

    #1246174
    David
    Staff
    Customer Support

    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;
        }
    }
    #1246804
    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

    #1247067
    Leo
    Staff
    Customer Support

    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;
    }
    #1247166
    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!

    #1247230
    Leo
    Staff
    Customer Support
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.