[Resolved] Slide out menu and Primary menu

Home Forums Support Slide out menu and Primary menu

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #536823
    Cristina Rose

    Hello GP team,

    Sorry for the bother, I am having a bit of trouble, I’m hoping you can point me towards some solution on these items.

    1. When I enable both Primary Nav and Slideout.
    only the Slideout pops out in mobile. Is there a way to show both on mobile?

    2. Expanding the Slideout to be fullscreen on mobile (removing the ‘X’ altogether)?

    3. Is there a way to show the Slideout menu like this site (https://www.glico.com/global/)?

    Thank you!
    C

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #537173
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. How would this work? Both mobile menus would open at the same time?

    2. How would the user close the slideout navigation? I suppose you could add a close button within the menu?

    3. Which part specifically? So it’s always open unless you close it?

    #537350
    Cristina Rose

    Hello Tom!

    1. When my current set up in desktop mode using both a primary menu and a sliding menu (with different assigned menus)

    fig a

    is then viewed in mobile, the menus collapse but it can only open the sliding menu. I would like a way to access the primary menu too if possible, even is it’s just two menus stacked atop each other or two side by side hamburger icon buttons.

    fig2

    2. Good point! I realized what I need more is a way to maximize the menu width in mobile.
    fig3

    2b. a way to display expanded menus by default? like the items already accordion-ed down. I don’t mind if it’s set flat.

    3. Yes. (always open unless you close it)

    Thank you.

    #537542
    Tom
    Lead Developer
    Lead Developer

    1. Interesting concept! This would take some considerable programming unfortunately, but I’ll look into making it easier to achieve in a future update.

    2. You can definitely adjust things on mobile:

    @media (max-width: 768px) {
        .offside {
            width: 265px;
        }
    
        .offside,
        .offside--left {
            left: -265px;
        }
    
        .offside--left.is-open,
        .offside-js--is-left .offside-sliding-element {
            -webkit-transform: translate3d(265px, 0, 0);
            -moz-transform: translate3d(265px, 0, 0);
            -ms-transform: translate3d(265px, 0, 0);
            -o-transform: translate3d(265px, 0, 0);
            transform: translate3d(265px, 0, 0);
        }
    
        .offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
            left: 260px;
        }
    }

    Just adjust the 260px to whatever you like.

    2b. We could do this, but we’d have to remove the arrows and have them display statically. Otherwise we’d need to write custom javascript.

    3. Looked into this a bit. It’s possible, but the menu would have to open as you loaded the page. That might look a little glitchy?

    #537954
    Cristina Rose

    Hello Tom!

    1. I see, thank you! I will just disable the slider for mobile and put a mobile only button that can trigger the slidermenu open using the slideout-toggle class.

    2. Thank you it works!
    2b. Yes, a static to display would be ok, Thank you.

    3. Ah you have a point.

    #538225
    Tom
    Lead Developer
    Lead Developer

    Something like this should do it:

    #generate-slideout-menu.main-navigation ul ul {
        display: block !important;
        height: auto;
        opacity: 1;
        pointer-events: auto;
    }
    
    #generate-slideout-menu .dropdown-menu-toggle {
        display: none;
    }

    Let me know 🙂

    #538728
    Cristina Rose

    Hello! I’ve applied this to the site,

    The sliding menu ends collapsing when you mouse over the parent.

    and the child items’ links seem to be un-clickable. Is this still possible?

    #538819
    Tom
    Lead Developer
    Lead Developer
    #540025
    Cristina Rose

    It worked, Thanks Tom!

    #540314
    Tom
    Lead Developer
    Lead Developer
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.