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

[Vlidi]

Unfortunately, nothing changes and it doesn’t work.

In addition, the console reports the undefined HTMLButtonElement called by this line:
s.setAttribute("aria-hidden", "true")

Not to clog the Forum I have posted all the PHP and CSS used on the very test page, in the case there is anything else we could investigate further.

I was not sure that the thing will ever work to start with, but we gave it a try.

And thanks for all this!
Amazing what you do for the users and how much we learn along the way.

[Tom]

Hmm, ok, last thing to try before I dig in and debug.

1. Turn off the mobile header – use the Navigation as Header option instead.
2. Then use this line: https://generatepress.com/forums/topic/animated-hamburger-for-off-canvas-panel-both-on-desktop-and-mobile/#post-1546849

Any change?

[Vlidi]

Hey Tom, great, we have the output now, and the animation works!
Thanks so much!

But not yet quite done: this ony added the new icon and didn’t replace the old one.
Also, the close (X) icons were doubled.

A few more questions / checkups before it gets perfect:

1. I could remove the GP hamburger like this:

.menu-toggle .gp-icon svg {
    display: none;
}

And the GP close button would only go away with this:

.toggled .icon-menu-bars svg:nth-child(2) {
    display: none;
}

Would this be OK or there is a better way to do it?

2. The console still complains about the “Uncaught TypeError: Cannot read property ‘setAttribute’ of undefined at HTMLButtonElement.s”, pointing to this line:

s.setAttribute("aria-hidden", "false"),

Is there something we can do about it?

3. This is quite nice and simple menu solution now, you can see it in action on the test page.
The only downside being that the Off Canvas and Header seem to be completely divorced, so the user can happily scroll away the Header while Off Canvas open, losing the close button along the way.
Is there an obvious / easy way for the Header to stay put while the Off Canvas is open?

Thank you once again for all the help!

[Tom]

Awesome!

1. This is a good way to do it.

2. I’ll look into this – we may need to make it so we can just add the custom hamburger element and have it target the off-canvas panel without needing to mess with the menu toggle at all.

3. This is always a tough one. One solution is to stop scrolling completely when the panel is opened:

.slide-opened {
    overflow: hidden;
}

[Vlidi]

Great Tom, all good news!

2. Sounds very good – should I wait for this before posting the wrap-up of what is done and marking this as “resolved”?

3. Works good enough for now.
If you ever think of the way to keep the header in place without freezing the rest of the content it would be much better.
And if you have the general idea in what direction I should look further, please let me know.

Thanks so much once again!

[Tom]

2. This should be fine for now – we’ll at least want to prevent that error from happening in the script in GP 3.1. Noted.

3. There isn’t really a way to do this due to the type of sticky navigation you’re using. I’ll think on it.

No problem!

[Vlidi]

Great, and thank you very much!

Marking this as “resolved” for the time being.

Will update the complete solution here once the Javascript error is fixed (and maybe “the runaway header” problem, in the case of using Sticky Navigation).

For whoever wants to use this menu solution in the meantime, all the steps necessary are on the test page here.

Thanks once again for such a fantastic support!

[Tom]

Thank you! 🙂

[Author]

Posts