[Support request] Hamburger switches to an X on off canvas menu

[Streater]

I added the off canvas menu… I wanted to keep showing the navigation bar and use the original X when the menu is open so I changed the Z-Index. But a problem came about: When I click the Hamburger to open it, it changes to X like normal. BUT I click the X to exit out and it exists out but stays an X. Then I click the X and it opens back up and now it is a hamburger while the menu is open. Any ideas?

[Streater]

Also I just noticed this same problem is created if I view the mobile layout on my desktop browser by making my window smaller. So I make the width of the browser smaller to be mobile.

Then I click the menu to be open. IF then I move the width of the browser, the X turns into a Hamburger (and the menu stays open).

In both these situations then, Hamburger means close the menu and X means open then menu.

[David]

Hi there,

can you remove the current CSS you have to reposition the off canvas – and ill take a look and provide some that works correctly.

[Streater]

Ok it is removed. Thanks!

[David]

Try adding this CSS to correct the Hamburger toggle:

body.slide-opened .icon-menu-bars svg:nth-child(1),
body:not(.slide-opened) .icon-menu-bars svg:nth-child(2){
    display: none;
}
body:not(.slide-opened) .icon-menu-bars svg:nth-child(1),
body.slide-opened .icon-menu-bars svg:nth-child(2) {
    display: inline;
}

[Streater]

That worked thanks!

[David]

Glad to hear that

[Author]

Posts