[Resolved] Animation in primary menu

Home Forums Support [Resolved] Animation in primary menu

Home Forums Support Animation in primary menu

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #824186

    Hi. I have a little problem to show the animation.

    I make a snippet

    add_action( 'generate_inside_mobile_menu', 'tu_custom_mobile_menu_1' );
    add_action( 'generate_inside_mobile_header_menu', 'tu_custom_mobile_menu_1' );
    function tu_custom_mobile_menu_1() {
    <div class="container_2" onclick="fnc1(this)">
      <div class="line line1"></div>
      <div class="line line3"></div>

    Code for Element

    function fnc1(el) {


    #mobile-header .menu-toggle:before,
    .menu-toggle .mobile-menu {
        display: none;
    .container_2 {
      position: relative;
      top: 0px;
      left: 0px;
      width: 20px;
      height: 20px;
    .line {
      background: #fff;
      height: 1px;
      width: 18px;
      margin-bottom: 6px;
      transition: all 500ms;
    .container_2.clicked2 .line1 {
      transform: rotate(0.11turn) translate(0px, 5px);
    .container_2.clicked2 .line3 {
      transform: rotate(-0.12turn) translate(0px, -4px);

    Somehow the animation covers the menu. What am I doing wrong?


    I think I must disable the other close icon with

    .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
        display: none;

    and make some adjustments with z-index for the overlay. But i dont know where i must do it.

    I think I’ve come a long way to solve that problem. Maybe you can give me the decisive idea. I would be very happy if you could help me, especially since an animation is wished by many in the forum.

    Customer Support

    Hi there,

    i don’t quite understand the issue? The menu opens correctly when i test it. Can you give me a few pointers 🙂


    Of course, the problem with the Animation is on the first primary menu in the mobile view. (dark navigation)

    The menu opens. That is not the problem either. But there is no visible animation.

    When I do some opacity. You could see the animation.

    .offside-js--is-open .slideout-overlay {
        opacity: 0.75;

    I noticed the following: When I press the hamburger button for the first time, the X button appears with the content of the menu; when I press the button (X-Button) again, however, the hamburger button does not appear, only the X button again.

    Can u see the problem?

    Customer Support

    Not sure but you could give this a shot, it should detect if the overlay clicked on and toggle the menu, but there could be interference:

    var slideOver = document.getElementsByClassName('slideout-overlay')[0];
    var menuToggle = document.getElementsByClassName('container_2')[0];
    slideOver.onclick = function() {

    I think I have now found a solution to the overlay problem with the code:

    .mobile-header-logo #mobile-header .menu-toggle {
        z-index: 9999999;

    When the menu is open and I press the X button directly the menu closes and the icon changes back to Hamburger. Everything so good.


    If the menu is opened and I press instead of the Burger button somewhere on the overlay; the menu is closed again. But the icon stays on X unchanged.

    How I could resolve this little problem?

    Customer Support

    Perfect. Thank you very much. Wish you a wonderful day.

    Customer Support

    Awesome – glad to be of help.

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