Nav Menu open and close toggles in same position, but different icons

[mrdavefoy]

With the Nav Menu Nestable element, I’d like the open and close toggles to be in the same position, but with different icons.

I know I can delete the close toggle element, and just use the open toggle to open and close, though I have to also set its z-index to 1001 to show when the mobile menu is open.

But that’s the SAME icon. And I want a hamburger when open, and maybe an X when closed.

I’ve come up with a solution but wondering if it’s a) the most efficient and b) still accessible.

1. I left the close toggle inside the nav menu structure, as it is by default.
2. Positioned it absolute, in the same position as the open toggle on desktop (top right for me).
3. Then in the CSS panel of the close toggle, added this CSS:

%root% {
	z-index: -1;
}
nav.brx-open %root% {
 	z-index: 1001;
}

This effectively hides the close toggle on desktop, then shows it when the menu is open.

This does work… but is it the best way?

I fear I’m over-complicating something that should be simple.

Thanks.

[Wingtracer]

Hey bud - just figured this out for myself. I removed the native mobile menu, and added off canvas element. Then, deleted the toggle in the off canvase div, and set the toggle (Open:Mobile) to z height 9999, and kept the animation as close. No other tricks with absolute or anything needed.

Screencast of it working