Archived topic
Hamburger switches to an X on off canvas menu
6 replies · Started by Streater on June 30, 2021
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?
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.
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.
Ok it is removed. Thanks!
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;
}That worked thanks!
Glad to hear that