[Resolved] Mobile menu

Home Forums Support Mobile menu

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #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?

    #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.

    #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

    #1049850
    Tom
    Lead Developer
    Lead Developer

    Try adding this:

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

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

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

    #1050222
    An Nguyen

    Hi Tom,

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

    #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.

    #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 ?

    #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 {
    
    }
    #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?

    #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.

    #1051678
    An Nguyen

    Hi Tom,

    So cool! Let’s waiting for next version.

    Thanks

Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.