Archived topic

Mobile menu

12 replies · Started by An Nguyen on October 29, 2019

Viewing posts 1–13 of 13

October 29, 2019 at 8:31 pm #1048399

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?

October 30, 2019 at 8:55 am #1048962

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.

October 30, 2019 at 4:51 pm #1049246

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

October 31, 2019 at 9:55 am #1049850

Try adding this:

button.menu-toggle {
    z-index: 1000000;
}

Also, replace .toggled in your CSS with .slide-opened.

October 31, 2019 at 10:40 am #1049882

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); }
    
}

October 31, 2019 at 8:52 pm #1050198

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 :)

October 31, 2019 at 9:36 pm #1050222

Hi Tom,

It's weird. I had added it before you said!

November 1, 2019 at 9:22 am #1050647

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.

November 1, 2019 at 10:59 am #1050742

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 ?

November 2, 2019 at 12:23 am #1051081

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 {

}

November 2, 2019 at 12:42 pm #1051564

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?

November 2, 2019 at 8:00 pm #1051672

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.

November 2, 2019 at 8:14 pm #1051678

Hi Tom,

So cool! Let’s waiting for next version.

Thanks

This archived topic is closed to new replies.

Start building better websites today.