- This topic has 12 replies, 2 voices, and was last updated 6 years, 5 months ago by
.
-
Posts
-
Hi Tom,
I follow one topic that you involved to make a mobile menu animation.
This topic that I get started: https://generatepress.com/forums/topic/spinning-hamburger/#post-976278
In my case, it doesn’t work in mobile mode, the icon menu disappears. I used generate_inside_mobile_menu hook and your css.
I also want it’s available on desktop. How can I do it?
Lead Developer
Since you’re using the Mobile Header, you need to use the
generate_inside_mobile_header_menu.It’s quite difficult to achieve on desktop at the moment, unfortunately. We’ve implemented filters in 1.9 which should simplify it a bit.
Hi Tom,
Hamburger icon appears but hamburger & close icons don’t animate. I want to see they animate like this site: https://www.getintheloop.com.au
Try adding this:
button.menu-toggle { z-index: 1000000; }Also, replace
.toggledin your CSS with.slide-opened.Hi Tom,
I did but it still hasn’t work.
It has two close-button icons as the same time. And I saw that hamburger button has animated as normal mode. In sticky mode, it doesn’t work.Just make sure that I did the right this. I change .toogle with .slide-opened
.hamburger--spin .hamburger-inner { transition-duration: 0.22s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } .hamburger--spin .hamburger-inner::before { transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in; } .hamburger--spin .hamburger-inner::after { transition: bottom 0.1s 0.25s ease-in, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .slide-opened .hamburger--spin .hamburger-inner { transform: rotate(225deg); transition-delay: 0.12s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } .slide-opened .hamburger--spin .hamburger-inner::before { top: 0; opacity: 0; transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out; } .slide-opened .hamburger--spin .hamburger-inner::after { bottom: 0; transform: rotate(-90deg); transition: bottom 0.1s ease-out, transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1); } }Can you add the code to the site? I’m not seeing it added right now. Sticky or not shouldn’t matter. Removing the second close button should be pretty easy.
Let me know 🙂
Hi Tom,
It’s weird. I had added it before you said!
Ah sorry – seeing it now.
Showing it on sticky isn’t working, as the mobile header being fixed isn’t allowing the menu toggle to appear on top of the off canvas panel.
What if the panel came in from the right? That way the menu toggle would stay visible instead of being covered up.
Hi Tom,
Because of position of icon in both desktop & mobile are different. It’s fixed right now and it will be complex and take more time to change the code snippet and CSS if cavas-off slide changes the position in both mode.
Currently,
I set in desktop mode, cavas-off slide comes from left side because hamburger-icon is left side.In mobile mode, It is left side in homepage and is right side in other pages because the right side position of hamburger-icon .
My idea is below but I’m not sure it works:
Tom, can we use javascript via hook to add a class “on-top-cavas-off” into mobile-header whenever hambuger-icon is clicked in sticky-mode? Then, give it a shot below.
<script type="text/javascript"> const activeHamburger = document.querySelector(".main-navigation div.hamburger"); const setCavas = document.querySelector("#mobile-header.main-navigation"); activeHamburger.addEventListener("click", ()=>{ setCavas.classList.toggle("on-top-cavas-off"); }); </script>.on-top-cavas-off { z-index:9999999999; margin-top: 0px; position: fixed; top: 0px;}a/If this option is right, can we add inside main-nav for desktop mode?
b/Do you have any ideas for CSS solution instead of using script ?
There’s a class in the
<html>element you might be able to use:For example:
.slide-opened #mobile-header { }That CSS will apply to the mobile header when the off canvas panel is visible.
For sticky mode, we can try:
.slide-opened #mobile-header.navigation-stick { }Hi Tom,
It worked on mobile. Thanks
How can I increase the size of hamburger-icon? It’s small now.
Do you have any idea for desktop mode?
Try changing this:
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 20px; height: 1px; background-color: #fff; } .hamburger-inner::before { top: -5px; } .hamburger-inner::after { bottom: -5px; }To this:
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after { width: 25px; height: 1px; background-color: #fff; } .hamburger-inner::before { top: -8px; } .hamburger-inner::after { bottom: -8px; }As of right now, the method on desktop is too complex to deal with in the forums here. It should be easier once 1.9 is out.
Hi Tom,
So cool! Let’s waiting for next version.
Thanks
- You must be logged in to reply to this topic.
