[Resolved] Mobile menu animation

[Dmitry]

Hi! Can you help to make main nav appear animations on mobile devices to act like it does on apple.com

I looked some solutions already published, but cant get all steps.

1. I have mobile header and sticky set to ON. Im lookin forward to make the smooth animation for the dropdown menu.
2. I made step by step all of this https://docs.generatepress.com/article/animated-hamburgers/ and still no result

[David]

Hi there,

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

[Dmitry]

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

[David]

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.

[Dmitry]

Yes, all the steps applied to the link I attached

[David]

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

[Dmitry]

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

[Tom]

Hi there,

Just to confirm, have you added this line?:

add_action( 'generate_inside_mobile_header_menu', 'tu_add_animated_hamburger_markup' );

[Dmitry]

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

[Elvin]

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.

[Dmitry]

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

[David]

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.

[Dmitry]

David, cute solution!

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

[David]

Go to Customizer > General and set the Icons to SVG

[Dmitry]

Nope, anyway

[Author]

Posts