[Resolved] Animated Hamburger Icon

[Tom]

1. No need to load Font Awesome if you won’t be using it.

2. Try replacing the javascript part of the code with this: https://gist.github.com/generatepress/589b9e91bca7205883b0454f15a4dcf9

3. The amount of the CSS is the same, so it won’t matter. Personally I would grab only the necessary CSS for the effect you need instead of loading all of the effects.

[liorsade8]

hi
i replaced the code….
still not working good with the scrolling….

[liorsade8]

http://prntscr.com/jmsat3

[Tom]

The forum stripped some of the code. Try this: https://gist.github.com/generatepress/589b9e91bca7205883b0454f15a4dcf9

[liorsade8]

did it.
still… not working

[liorsade8]

print screen of the hooks:

http://prntscr.com/jmx6ju

[Tom]

Just made another small adjustment: https://gist.github.com/generatepress/589b9e91bca7205883b0454f15a4dcf9

[liorsade8]

hoooooooooolllllllyyyy gwakamooollleeee!
it’s working!
u’r awesome!!!
now we all have regular and one page scrolling animated hamburger icons for the amazing Generatepress theme!
u’r the best guys!
thanks

[Tom]

You’re welcome 🙂

[Jonathan]

I’ve used the gist and have a working button however I was hoping it would be applied to the slideout menu which I’m not sure about. When the main hamburger div is clicked it rotates however the slidemenu closes the button is left in it’s closed state. Example site below, needs viewing in mobile:

https://retail.morocco-gold.com/

[liorsade8]

hi tom, does the slidemenu has a different code needed as Jonathan wanted?
it will be great to know…
i changed the site: http://menuhamburgerstest.s178.upress.link/
to slideout menu so we can try on it…
thanks

[Tom]

I just updated the code: https://gist.github.com/generatepress/589b9e91bca7205883b0454f15a4dcf9

Let me know if it works or not 🙂

[Jonathan]

Thanks. It does work to a point but the animation is lost when the slideout menu appears as the close button is static.

A good example of what I was looking for is this site, although the slideout is 100% width of the browser:

http://demos.themetrust.com/becket

[Tom]

That’s strange, here’s what I’m seeing: https://www.screencast.com/t/wg0a4pgwlhyi

Are you seeing something different?

[Jonathan]

I see the closed button (using chrome, latest version) which is to the top right of the yellow background. See link:

https://www.dropbox.com/s/ijxz6h08o2bgq7u/slide-state.png?dl=0

It would be good if the closed button was animated while the menu opened like the button menu does.

[Author]

Posts