[Resolved] Customize burger menu

Home Forums Support [Resolved] Customize burger menu

Home Forums Support Customize burger menu

Viewing 13 posts - 16 through 28 (of 28 total)
  • Author
    Posts
  • #526549
    Tom
    Lead Developer
    Lead Developer

    The first code should be added like this: https://docs.generatepress.com/article/adding-css/

    The second code (where you add your HTML), should be added like this: https://docs.generatepress.com/article/adding-php/

    Once you get that part done, try your best to follow the instructions for the toggle you want to use. Then let me know and I’ll see if I can help finish it up.

    #527739
    Michael

    Hi Tom

    I’ve spent a whole day trying to follow your instructions.

    I was able to remove hamburger by pasting your code into simple css.

    In snippet, I add your second code and also my html where you instructed me to add.
    But I could not see the new hamburger when I went live on my phone.

    I also paste the javascript to snippet
    <script>var wrapperMenu = document.querySelector(‘.wrapper-menu’);

    wrapperMenu.addEventListener(‘click’, function(){
    wrapperMenu.classList.toggle(‘open’);
    })</script>

    But snippet showed error.

    I also tried pasting the css code from https://codepen.io/JoseRosario/pen/BWqMwK
    It didn’t work and almost ruin my website.

    So, I really need your expertise if I ever going to get the hamburger I want on the website.

    Please kindly help me to resolve this. It would be appreciated.
    If you need to need to access my website, it’s the same previous login or I can send it again.

    #528197
    Tom
    Lead Developer
    Lead Developer

    I’ll do my best, but no guarantees that it will work. This is somewhat outside the scope of GP support.

    First, let’s hook in our HTML:

    add_action( 'generate_inside_mobile_menu', 'tu_custom_mobile_menu' );
    add_action( 'generate_inside_mobile_header_menu', 'tu_custom_mobile_menu' );
    function tu_custom_mobile_menu() {
    ?>
        <div class="wrapper-menu">
            <div class="line-menu half start"></div>
            <div class="line-menu"></div>
            <div class="line-menu half end"></div>
        </div>
    <?php
    }

    Then, we’ll add our CSS:

    .menu-toggle:before,
    .menu-toggle .mobile-menu {
        display: none;
    }
    
    .wrapper-menu {
      width: 50px;
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      transition: transform 330ms ease-out;
    }
    
    .wrapper-menu.open {
      transform: rotate(-45deg);  
    }
    
    .line-menu {
      background-color: #fff;
      border-radius: 5px;
      width: 100%;
      height: 6px;
    }
    
    .line-menu.half {
      width: 50%;
    }
    
    .line-menu.start {
      transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
      transform-origin: right;
    }
    
    .open .line-menu.start {
      transform: rotate(-90deg) translateX(3px);
    }
    
    .line-menu.end {
      align-self: flex-end;
      transition: transform 330ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
      transform-origin: left;
    }
    
    .open .line-menu.end {
      transform: rotate(-90deg) translateX(-3px);
    }

    Then, we’ll add our javascript (into the wp_footer hook in GP Hooks):

    var wrapperMenu = document.querySelector('.wrapper-menu');
    
    wrapperMenu.addEventListener('click', function(){
      wrapperMenu.classList.toggle('open');  
    });

    In theory, that should do it. However it’s quite complex, and definitely not guaranteed.

    #528228
    Michael

    Hi Tom

    Thanks very much for helping.

    #528229
    Tom
    Lead Developer
    Lead Developer

    No problem – let me know if it works or not. If not, link me to the site and I’ll take a look 🙂

    #528242
    Michael

    Most certainly will give you an update.

    #529220
    Michael

    Hi Tom.

    I followed your complete instructions, but it didn’t work no hamburger menu.

    However this time it didn’t corrupt any data/css existing codes that’s already on the site when I first
    tried.

    I have left all the codes in the areas that you’ve previously instructed.

    If possible when you have the time to look at this problem for me.
    I have emailed the credentials to gain access to the site.

    #529406
    Tom
    Lead Developer
    Lead Developer

    Ah, you’re using the mobile header.

    I just adjusted the code above – replace all of it and it should work: https://generatepress.com/forums/topic/customize-burger-menu/page/2/#post-528197

    #529585
    Michael

    Hi Tom

    The hamburger is now showing
    but when I click on the hamburger, there is no animation.

    Do you what went wrong?

    Below is the link to the GP Hooks, that I past it. Should I click box where is ask to execute PHP?

    https://postimg.org/image/4kz1q1xx3/

    #529591
    Michael

    I forgot to include.

    The hamburger is to big.
    To reduce the size, do I just adjust
    The width and height of pixel below?

    wrapper-menu {
    width: 50px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 330ms ease-out;
    }

    #530165
    Tom
    Lead Developer
    Lead Developer

    Try this as the javascript instead:

    jQuery( document ).ready( function($) {
        $( '.menu-toggle' ).on( 'click', function() {
            $( this ).find( '.wrapper-menu' ).toggleClass( 'open' );
        } );
    } );

    For the size, just reduce the 50px values in the CSS.

    #530413
    Michael

    Hi Tom

    The new codes worked wonderfully.

    I would like to say, thank you very much for going out of your way to assist me with this matter.

    #530578
    Tom
    Lead Developer
    Lead Developer
Viewing 13 posts - 16 through 28 (of 28 total)
  • You must be logged in to reply to this topic.