[Resolved] Animated hamburger for Off Canvas panel both on desktop and mobile

[Vlidi]

Hi guys, and thank you for all the great stuff!

Feel quite stupid today, but I just seem not to be able to adopt this solution to what I need:

https://docs.generatepress.com/article/animated-hamburgers

And what I need should be quite simple:

– I want to have the Off Canvas menu both on desktop and on mobile, and to have the icon look and be animated like on the example above.

On another site I was able to make the mobile header hamburger look and do using the instructions above, but that one used regular primary navigation for desktop.
Now I need this on desktop that is using the Off Canvas panel but nothing happens there, while on mobile the new icon would just be added to the regular GP icon (there would be two) and the animation is not working.

The current settings are nav float right on desktop, and mobile header for the mobile.
The Off Canvas is on, close button set to inside.

I wiped all the Javascript and CSS I have tried and the cache should be off.

Can you guide me in the right direction?
Thanks!

[Tom]

Hi there,

This may be difficult, but let’s give it a shot.

Best thing to do here is probably hide the slideout toggle and display the menu toggle on desktop:

.main-navigation button.menu-toggle {
    display: block;
    color: #fff !important;
}

.main-navigation .menu-bar-items {
    display: none;
}

Then you should be able to use the instructions from that article.

Let me know 🙂

[Vlidi]

Hi Tom, and thank you!

Unfortunately, this CSS didn’t make any difference.

I could successfully implement this on the mobile version of a different site that uses the classic primary navigation for desktop. I just can’t figure out why it wouldn’t work both in desktop and in mobile on the site that uses Off Canvas panel (set to On for both) as the main navigattion.

I have set up the test page where you can take a look HERE.

All the steps from from this documentation page should be in place.
The CSS you sent is still there, but doesn’t affect the problem.

Thanks for any help with this!

[Tom]

Make sure you’ve added this line as well:

add_action( 'generate_inside_mobile_menu', 'tu_add_animated_hamburger_markup' );

You’re adding it to the main mobile menu and the mobile header menu.

Let me know 🙂

[Vlidi]

Great, getting somewhere – this have added the new hamburger to the desktop Off Canvas toggle as well.
Thank you!

However, we are still stuck with the two initial problems:

1. There are two hamburgers now (the new one + the GP one) in both desktop and mobile;
2. The animation is not working.

Re: the CSS you have sent in the thread above, it behaves like this:

– When I remove it entirely, the new hamburger disappears from desktop;
– When I remove only the first line, all navigation disappears from desktop;
– When I remove only the second line, I get three hamburgers on desktop (the new one + the 2 instances of GP one).

Thanks so much for all the help!

[Tom]

Hmm, something strange going on – I’m seeing a javascript error in our main javascript file.

Can we undo the above changes and start fresh? I have an idea for an alternative route possibly.

Let me know 🙂

[Vlidi]

Sure, no problem – and thank you!

I have deactivated all the three Snippets we had, and all related CSS – both from the documentation page and what you have sent – is commented out.

The current situation:

– Off Canvas is On for desktop and mobile, close button set to “inside”.
– Primary Navigation Menu set to blank menu.
– Mobile Header is On.
– Sticky Nav is On.

URL and login details, if necessary, are below.

Thanks once again!

[Tom]

Alright, let’s do this step by step, I want to see where it’s failing.

First, add this CSS:

.menu-bar-item.slideout-toggle {
    display: none;
}

Now go to Customize > Layout > Primary Navigation and set the Mobile Menu Breakpoint to something large, like 2000.

Let me know when that’s done 🙂

[Vlidi]

Great, very curious!

OK, so:

– CSS added (the bottom of the sheet).
– Mobile breakpoint set to 2000.

The GP hamburger is there, it swings a bit left-right when switching between sticky and header mode.

[Tom]

We no longer have that error I saw, so that’s good!

I’m not seeing it swing at all – in fact, I’m not sure you’ll even be able to see the animation since the off-canvas panel opens in front of it?

Now you can follow these instructions: https://docs.generatepress.com/article/animated-hamburgers/

Be sure to include the line I mentioned up here as well: https://generatepress.com/forums/topic/animated-hamburger-for-off-canvas-panel-both-on-desktop-and-mobile/#post-1546849

[Vlidi]

Hey Tom, thanks!

Unfortunately either I am doing something horribly wrong, or this just won’t work for Off Canvas situations.

I thought it will make the whole thing easier (one and the same Off Canvas menu, the same hamburger icon and the same animation for all the versions). I was quite wrong it seems :-/

I was able to make it work easily with another site that uses the “classic” Primary Navigation on Desktop and Mobile Header (only for the mobile version of course – link in the box below).

I wanted to have the same solution for Desktop as well this time, only the menu would enter sideways then and not as dropdown.

I hoped to achieve on-top visibility of the animation and the hamburger by playing with the z-index: 100002 and such, and I thought THAT might be a problem and a question for the Forum; but we never got the burger to start with.

I am unable to locate where the problem is.
Can you please confirm this checklist so that I am sure I haven’t misunderstood anything:

1. We have this CSS you have sent and the Mobile Breakpoint set to 2000;

2. I have implemented all the steps from the https://docs.generatepress.com/article/animated-hamburgers.
So we have the three PHP Snippets, and the three pieces of CSS (I have also included the Off Canvas instructions).

3. The first out of three PHP functions ends not as in the documentation, but with this line you have sent.

I sincerely hope you’ll reveal that I messed something up 🙂
Otherwise, I have no idea how to make it work.

And thanks once again for all this!
You guys are amazing.

[Vlidi]

P.S.
If it is of any help:

I could see from the very start that something goes wrong, as the hamburger will not pick up the GP part of the CSS from the Step 1 here.
It could be targeted still but with something like #mobile-header .menu-toggle.

[Tom]

Have you done all of this on the staging site you mentioned in this post?: https://generatepress.com/forums/topic/animated-hamburger-for-off-canvas-panel-both-on-desktop-and-mobile/#post-1550355

If so, I’m not seeing the HTML into the button, which would be added with this line: https://generatepress.com/forums/topic/animated-hamburger-for-off-canvas-panel-both-on-desktop-and-mobile/#post-1546849

Are we sure that code is activated on the site?

[Vlidi]

Hey Tom,

no, the last link to that staging site was actually the example of where I was able to make it work (as Mobile Header only). We are on the same test page from before, I re-added the link below.

All the three snippets as offered here should be active:
https://docs.generatepress.com/article/animated-hamburgers

The first one is modified according to your instructions:

function tu_add_animated_hamburger_markup() {
	?>
	    <div class="hamburger hamburger--collapse">
	        <div class="hamburger-box">
	            <div class="hamburger-inner"></div>
	        </div>
	    </div>
	<?php
}
add_action( 'generate_inside_mobile_menu', 'tu_add_animated_hamburger_markup' );

Thanks!

[Tom]

Ah, sorry, I didn’t notice that the mobile header was displaying on desktop.

Use this, instead:

add_action( 'generate_inside_mobile_header_menu', 'tu_add_animated_hamburger_markup' );

[Author]

Posts