[Resolved] Animation in primary menu

[Ender]

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>
</div>

<?php
}

Code for Element

<script>
	
function fnc1(el) {
  el.classList.toggle("clicked2");
}
	
</script>

CSS

#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?

[Ender]

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.

[David]

Hi there,

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ender]

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?

[David]

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() {
    menuToggle.classList.toggle("clicked2");
    console.log('dick');
};

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ender]

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.

But:

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?

[David]

Did you see my last reply:
https://generatepress.com/forums/topic/animation-in-primary-menu/#post-824576

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ender]

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

[David]

Awesome – glad to be of help.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts