[Resolved] Slide out menu and Primary menu

[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

[Tom]

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?

[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)

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.

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

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.

[Tom]

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?

[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.

[Tom]

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 🙂

[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?

[Tom]

Sorry about that! Just adjusted the CSS above which should fix it: https://generatepress.com/forums/topic/slide-out-menu-and-primary-menu/#post-538225

Let me know 🙂

[Cristina Rose]

It worked, Thanks Tom!

[Tom]

No problem! 🙂

[Author]

Posts