Mobile menu animation

Hi there,

are you wanting the Animated Hamburger or just the animiated menu opening ?

Both. First of all animated opening, because simple appear is too boring.

For the amimated hamnburger - did you follow all the steps in this doc?

https://docs.generatepress.com/article/animated-hamburgers/

Be good to get that working first - and then we can take a look at whats possible for the opening.

Yes, all the steps applied to the link I attached

The Javascript isn't firing. Can you disable any cache/optimization plugins ?

I dont use any. Hm... but it should https://prnt.sc/26gyi6l I also can see it in source code

Hi there,

Just to confirm, have you added this line?:

add_action( 'generate_inside_mobile_header_menu', 'tu_add_animated_hamburger_markup' );

Yeah, I do. Even tried both of them https://prnt.sc/26i7nwm

Hi there,

I've tested the guide from the documentation and it's working on my end as shown here -
https://dev-generate-press.pantheonsite.io/
Video - https://share.getcloudapp.com/jkum4ZnE

You may be missing a few steps like some CSS or a plugin is messing w/ the script you just added. You can try disabling ALL plugins except GP Premium to be sure there's no plugin conflict w/ the JS.

Checked one more time everything. It is not about plugins, all steps are ok...It looks like its too complex to handle this.

Ok! Lets focus on:

1. I have mobile header and sticky set to ON. Im lookin forward to make the smooth animation for the dropdown menu.

like it is on apple mobile website

There is another method that creates this affect:

https://www.screencast.com/t/YbNbkhJIt3VU

In this GIST i provide a PHP Snippet and the CSS for that effect:

https://gist.github.com/diggeddy/75831a9666f3480c11338569c3d6cf10

Its designed to work with the default Mobile Menu only.

David, cute solution!

But it seems that this filter "generate_svg_icon" refuses to work on my web-site. Why could that happened?

Go to Customizer > General and set the Icons to SVG

Nope, anyway