Mobile menu – GeneratePress

This topic has 12 replies, 2 voices, and was last updated 4 years, 5 months ago by An Nguyen.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
October 29, 2019 at 8:31 pm #1048399

An Nguyen

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

Tom
Lead Developer
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.

October 30, 2019 at 4:51 pm #1049246

An Nguyen

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
Tom
Lead Developer
Lead Developer
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
An Nguyen
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

Tom
Lead Developer
Lead Developer

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

An Nguyen

Hi Tom,

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

November 1, 2019 at 9:22 am #1050647

Tom
Lead Developer
Lead Developer

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
An Nguyen
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
Tom
Lead Developer
Lead Developer
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

An Nguyen

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
Tom
Lead Developer
Lead Developer
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

An Nguyen

Hi Tom,

So cool! Let’s waiting for next version.

Thanks
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

[Resolved] Mobile menu

Popular Articles

Start building better websites today.