[Resolved] Customize burger menu

[Tom]

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.

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

[Tom]

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.

[Michael]

Hi Tom

Thanks very much for helping.

[Tom]

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

[Michael]

Most certainly will give you an update.

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

[Tom]

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

[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/

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

[Tom]

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.

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

[Tom]

You’re very welcome 🙂

[Author]

Posts