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 WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Smooth transition for off-canvas slide menu

  • Hi, in an earlier thread at (https://generatepress.com/forums/topic/remove-drop-down-toggle-in-off-canvas-slide-menu/#post-2499648) 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?

    Thanks,
    Arved

  • Hi Arved,

    Remove this CSS:

    .offside--right.is-open{
        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!

    Best,
    Arved

  • Glad to hear that 🙂

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