Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Smooth transition for off-canvas slide menu

  • Hi, in an earlier thread at ( a beautiful little piece of CSS was suggested to make the transition of the off-canvas slide menu smoother.

    .slideout-navigation .dropdown-menu-toggle:before {
    opacity: 0;
    margin-left: -0.8em;
    visibility: hidden;
    .menu-item-has-children .dropdown-menu-toggle {
    padding-left: 0;

    I really liked the result, but unfortunately recently this code stopped working, rather breaking the menu.

    Would anybody have an idea why it stopped working and how I could get back the smooth transition?


  • Hi Arved,

    Remove this CSS:{
        transform: translatex(-90vw);
    .main-navigation.offside.offside--right {
        right: -90vw;

    Add this CSS:

    :root {
        --gp-slideout-width: 90vw !important;

    Let me know if this helps!

  • Hi Ying,

    Thank you for the updated code, works perfectly!


  • Glad to hear that 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.