[Support request] Weird behavior of the off-canvas panel toggle button

[Brandon]

I’ve run into a weird issue I just can’t seem to figure out how to fix. I’m styling the slide out off canvas-panel to display under the header, so the menu toggle button and header bar are always in view. Everything is functioning and structured correctly, however for some reason, after the first time you toggle open the mobile menu the bars (open) turn into the “X” (close) as expected, however upon clicking the “X” to close, the “X” does not revert back to the bars like it should. However, upon clicking the toggle button to open the menu (even though the icon is still an “X”, it then turns to the bars when the menu is opening, and then starts functioning as normal however with the icons in reverse. Sorry if that’s confusing to explain. When I click on the page to close the off-canvas panel, the icon changes to the bars as expected…

[Ying]

Hi Brandon,

Any chance you can link us to the site in question?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Brandon]

Hi, yes just attached the link. Thanks!

[David]

Hi there,

try adding this CSS:

html.slide-opened .menu-toggle .icon-menu-bars svg:nth-child(1),
html:not(.slide-opened) .menu-toggle .icon-menu-bars svg:nth-child(2)  {
    display: none !important;
}

html:not(.slide-opened) .menu-toggle .icon-menu-bars svg:nth-child(1),
html.slide-opened .menu-toggle .icon-menu-bars svg:nth-child(2) {
    display: block !important;
}

[Brandon]

That seems to have done the trick! Thanks!

[David]

Glad to be of help!

[ic7]

Hi! I ran into exactly the same issue mentioned in the first post of this topic. I added the CSS mentioned by David and it solved the issue with the menu icon. So far, so good…
Now in my case, the search icon is also placed in the header bar (mobile structure: site icon on the left, search icon + menu icon on the right). Both icons can be clicked separately and work as expected (click search icon to open or close search bar, click menu icon to open or close the off-canvas panel). Now the weird part: If the mobile menu was opened once, a click on the search icon now opens both, the search bar AND the off-canvas panel with both icons turned into Xs. Now clicking the right X closes both elements, clicking the left X only closes the search bar as expected.
Is there a way to prevent both elements being open at the same time, resulting in two X icons next to each other?

The site is still under development on a local server, so I can’t share a link at the moment.
Thank you very much for your help in advance!

Kind regards,
Sebastian

[David]

Hi there,

is it possible to see the issue on your site?
If you want – raise a new topic, where you will have access to the Private Information field for sharing URLs etc

[ic7]

Hi Dave,

I opened a new topic and provided the url plus login credentials:
https://generatepress.com/forums/topic/weird-behavior-of-the-off-canvas-panel-toggle-button-extended/

[Author]

Posts