[Resolved] a problem with jonsuh.com/hamburgers menu

[liorsade8]

hi
sorry for the delay.
i couldnt break a site, so i made a test site, here is the link:
generatepress-test.s178.upress.link
i have changed all to spring.
please check
thanks.

[Tom]

Can you remove any CSS we added that wasn’t a part of the hamburger.css? Anything you change to spring from vortex in your custom CSS.

[liorsade8]

hi i did
the only CSS is:

.mobile-menu-open .hamburger–spring .hamburger-inner {
transform: rotate(765deg);
transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.mobile-menu-open .hamburger–spring .hamburger-inner::before {
top: 0;
opacity: 0;
}

.mobile-menu-open .hamburger–spring .hamburger-inner::before,
.mobile-menu-open .hamburger–spring .hamburger-inner::after {
transition-delay: 0s;
}

.mobile-menu-open .hamburger–spring .hamburger-inner::after {
bottom: 0;
transform: rotate(90deg);
}

.mobile-menu-open .hamburger–spring .hamburger-inner::before,
.mobile-menu-open .hamburger–spring .hamburger-inner::after {
transition-delay: 0s;
}

[Tom]

Any changes if you remove that? The custom CSS was made specifically for vortex, so it won’t work with spring.

There is an up-to-date article on animated hamburgers here which may help: https://docs.generatepress.com/article/animated-hamburgers/

[liorsade8]

hi
ok
i’ll try…
tell me – which is better loading the jonsuh from the css code?
or to actually upload the entire library as i am doing to all of my sites and then it’s on my site server (might be loaded quickly, or not?)?
what do u think?

[liorsade8]

hi
so this code on the link: https://docs.generatepress.com/article/animated-hamburgers
is just for collapse animation…
when i try to change it to arrow / spring / or whatever it’s not working…
only collapse…?

[Tom]

Yes, the example uses collapse. You can grab any of the other effects from their site and replace the collapse CSS with it, then just update the collapse class in the HTML with the effect you chose.

[liorsade8]

hi
i try to put some other code for other animation… and didn’t got it right…
this is why asking u…
can you refer / write what code for example i need to put when want to use spring for instance?
thanks

[Tom]

First, delete all the CSS under the /* Collapse */ CSS comment in your custom CSS.

Then add the CSS for spring: https://github.com/jonsuh/hamburgers/blob/v1.1.3/dist/hamburgers.css#L531-L554

Then, in your PHP, find this line: <div class="hamburger hamburger--collapse">

And replace it with this:

<div class="hamburger hamburger--spring">

[liorsade8]

GREEEEAAAATT It’s working.
Once again u guys are amazing!

and again asking – which is better? loading the jonsuh from the css code? like now… like in this site when u helped me // or to actually upload the entire library as i am doing now to all of my sites and then it’s on my site server (might be loaded quickly, or not?)?
what do u think?

[Tom]

I would personally only add the CSS I need 🙂

[liorsade8]

Great Guys.
U are Great!

[Tom]

Glad I could help 🙂

[liorsade8]

hi top
still there is a problem with this method.
if you will see support ticket: #713802
i was complaining about that

when i resize the browser to mobile for instance… and press the button of the menu, and leave it open and now enlarge the browser to “maximaize”
and than click again “restore down” on the entire browser…
and you will see that the menu is broken…
u need to refresh the page for it to come back to normal…

any fix for that?
see in the code u gave me in the old ticket u figured it out and helped it and it’s working the other way…

example site:
http://studiosadenew.s178.upress.link

thanks

[Tom]

I’ve updated the javascript here to hopefully handle that: https://docs.generatepress.com/article/animated-hamburgers/

[Author]

Posts