Best approach for animating or transitioning Gutenberg navigation menu on mobile

  • I’ve been trying to figure out how to apply my own slide-in css to the mobile navigation menu but I can’t seem to get anywhere with it.

    Does anyone have a good approach when it comes to animating and positioning the mobile menu how I want it? I don’t seem to run into much issue trying to add my custom styling but I don’t seem to be able to control how the menu appears and disappears from the page when clicked.

    I would love to be able to try different css like translateX and translateY but I can’t seem to find a way.

    Any insight or guide to how i should approach this would be great. (Not interested in installing custom plugins or themes).

    My ideal goal would be to have my mobile menu off-screen using a translateX by default and then when the open class is applied have it transition the translateX property in.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    The usual approach to apply CSS based on user interaction is to add event listeners to the appropriate elements. The listener callback can then apply CSS and other properties as desired. jQuery makes adding listeners somewhat intuitive if you already understand CSS selectors. For example:

    $( "#target" ).on( "click", function() {
  this.classList.add("silde-in");
} );

    ref: https://api.jquery.com/click/

    A common way to add a number of CSS styles all at once is to use a distinct selector for all the styles and simply add/remove the related selector to/from the element.

    Thread Starter Ryan C

    (@multiflex)

    Thanks for your response. I’m quite familiar with onClick functions on elements, applying classes on the navigation container hasn’t worked for me as it looks like it has some default behaviour on how it appears and disappears. I’m unsure how to override or adjust the defaults.

    Thread Starter Ryan C

    (@multiflex)

    The element i’m trying to transition and apply different translate effects to is the element’.wp-block-navigation__responsive-container’ applying translate to the ‘is-menu-open’ class but nothing i try seems to work

    Thread Starter Ryan C

    (@multiflex)

    Just to update quickly, I’ve managed to get the mobile navigation to slide in when the hamburger is clicked but for some reason it doesn’t slide out when the close icon is clicked. This is the CSS i worked with in the browser, any ideas? Has anyone ran into this issue before with the mobile menu not animating the slide out?

    The slide-in works because of display flex, but when it disappears, it becomes display none. I haven’t figured it out yet, either.

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