[Resolved] Off-canvas slide menu staggered when closing, but smooth on opening

[Greg]

Hi guys,

I’m using the off-canvas menu, but I’ve noticed it has a smooth slide from the right on opening, but appears to get stuck/lag when closing. It stops around half way for a very brief pause then finishes closing.

I can’t find out what’s causing it, any ideas?

I’m using a child theme with the latest GP theme (3.2.4), GP Premium (2.2.2) & GB Pro (1.5.0).
URL shared in the private info section.

Thanks,
Greg

[Greg]

Sorry, since found a solution to this one:
https://generatepress.com/forums/topic/off-canvas-panel-width/#post-1043740

Thanks,
Greg

[David]

Glad to hear that!

[Greg]

Edit: Found a solution, if anyone else needs it…

I had the following custom CSS from a post by David on another thread. All I needed to add was ‘–gp-slideout-width: 500px!important;‘ to the root, to override the default width (which is where my off-canvas panel was stopping briefly on closing the menu).

/* desktop width */
:root {
    --slideout-width: 500px;
    --gp-slideout-width: 500px!important;
}
/* small device width */
@media(max-width: 768px) {
    :root {
        --slideout-width: 100%;
    }
}

#generate-slideout-menu.main-navigation.offside {
    width: var(--slideout-width);
}

#generate-slideout-menu.main-navigation.offside--left {
    left: calc(-1 * var(--slideout-width));
}

#generate-slideout-menu.main-navigation.offside--left.is-open {
    transform: translate3d(var(--slideout-width), 0, 0);
}

[David]

Glad to see you found that of use 🙂

[Author]

Posts