[Resolved] Weird behavior of the off-canvas panel toggle button (extended)

[ic7]

This is a follow-up to this topic:
https://generatepress.com/forums/topic/weird-behavior-of-the-off-canvas-panel-toggle-button/

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?

Thank you very much for your help in advance!

Kind regards,
Sebastian

[Fernando]

Hi Ic7,

As a first course of debugging, can you try #1 here?: https://docs.generatepress.com/article/debugging-tips/

You can try starting with any caching/optimization plugins.

It would be good to take a backup of your site before doing so.

Kindly let us know how it goes.

[ic7]

Hi Fernando,

the problem arises in connection with the activation of the ‘GP Premium’ plugin.

If this plugin is activated I was able to observe the following:
After clicking the menu icon a ‘toggled’ class is added to the <nav> element and the ‘aria-expanded’ label of the <button> element changes to “true” ( this is expected behavior).
But after clicking the close icon these two elements remain UNCHANGED.
The <nav> element still has the ‘toggled’ class and the buttons ‘aria-expanded’ label is still set to “true”.
That’s why the described problem only occurs if the mobile menu was opened once before.

I also want to mention that this is not a general ‘GP Premium’ problem as the problem only occurs in this installation/configuration. I suspect it is due to the combination of the two icons/functions ‘Search’ and ‘Mobile Menu’.

Thanks for taking the time to look into this.

[Ying]

The current x icon which closes the menu is not the default one, how did you add that?

[ic7]

Hi Ying,

as mentioned in my first post, this topic is a follow-up to this one:
https://generatepress.com/forums/topic/weird-behavior-of-the-off-canvas-panel-toggle-button/

David provided the following CSS snippet to deal with the problem of the X icon not changing back to the menu icon when the menu is closed manually:

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;
}

This is the only customization I am aware of in regard to the menu / close icon.
As this snippet is not changing the icon itself I’m pretty sure that it’s still the default icon in use.
The described problem persists with or without the above mentioned CSS snippet.
What makes you think it’s not the default icon? The source code looks identical to me.

The aim should be that neither of the two elements (search bar / mobile menu) can be open at the same time. When one element opens, the other should close and vice versa.

Thank you all for taking the time to look into this. I really appreciate it!

[David]

Hi there,

if you remove the CSS i provided in that other topic, does the off canvas panel behave as expected ? ( ignoring the incorrect icons ).

[ic7]

Hi Dave,

no, the provided CSS snippet has no effect on the described problem.
As I mentioned in my reply #2287086 the ‘toggled’ class of the <nav> element and the ‘aria-expanded’ label of the button element remain unchanged if the menu is closed manually.
Maybe this is why the close icon doesn’t change, if I remove the provided CSS snippet.

[David]

Its not normal that the search icon would trigger the off canvas, which is odd.
Can you disable any functions added to the site ?

[ic7]

Hi Dave,

I further investigated the situation.
Since I’m not using the close button that’s normally attached to the off-canvas panel (the one you can place inside or outside the panel in the customizer) the before mentioned elements don’t change.
It seems the button that is attached to the off-canvas panel is the only button that changes the panel elements correctly.
The main menu button in the header that normally gets overlayed by the off-canvas panel doesn’t seem to have the same functionality, when manually closing the panel.
Could that be right? If yes, could this bug be fixed by adding the same functionality to the main menu button?
Now I also understand what Ying meant.
It would be great if the mobile menu could be opened and closed by a button that stays in the same position. That’s what I was trying to achieve here.

[David]

Yeah the Slideout does have its own separate exit, and without it being used it can conflict with the default mobile toggle. It is something we need to review. But i never came across the issue with the search icon interfering before. That has me puzzled and i need to do some digging.

As a workaround, remove this CSS:

.offside-js--is-open .slideout-overlay {
    display: none !important;
}

And Add this:

.offside-js--is-open .slideout-overlay {
    left: unset;
    bottom: unset;
    right: 0;
    width: 64px;
    min-height: 164px;
    overflow: hidden;
    opacity: 0 !important;
}

That will position the exit overlay on top of the close toggle,

I can’t do much about the possibility that both search and menu are opened at the same time but that should stop the other nonsense

[ic7]

Hi Dave,

thank you very much for this workaround! This has helped me a lot!
Now the possibility that a user “manages” to see both panels open at the same time is very small.
So, this will have to do for now 😉

Thank you so much for taking the time and digging into this!
Very much appreciated!

[David]

Glad to hear that worked!

[Author]

Posts