Archived topic

Close current off-canvas submenu

8 replies · Started by Jeroen on February 11, 2022

Viewing posts 1–9 of 9

February 11, 2022 at 7:54 am #2114530

Hi,

I use custom CSS to open the current submenu within my off-canvas menu (as found on this topic)

#generate-slideout-menu.main-navigation ul li.current-menu-parent ul {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    overflow: visible;
}

But with this CSS, the toggle button of this 'current' submenu is not working anymore.
I want users to be able to close the submenu again.
Is there a solution to this problem?

February 11, 2022 at 11:07 am #2114779

Hi Jeroen,

You can give this CSS a try:

#generate-slideout-menu.main-navigation ul li.current-menu-parent ul.toggled-on {
    display: none !important;
}
.slideout-navigation li.current-menu-parent.sfHover>a>.dropdown-menu-toggle>.gp-icon svg {
    transform: rotate(0deg) !important;
}
.slideout-navigation li.current-menu-parent:not(.sfHover)>a>.dropdown-menu-toggle>.gp-icon svg {
    transform: rotate(180deg) !important;
}

Let me know :)

February 11, 2022 at 1:10 pm #2114934

Thanks! It's a step in the right direction.

A new issue arises. It does not cooperate well with the other sub menus.

When I open/toggle another submenu, the 'current' one stays open.
When I then close the 'current' submenu, the other one also closes.

February 12, 2022 at 11:29 am #2115938

Any chance you can link us to the site in question so I can see the new issue?

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

Let me know :)

February 12, 2022 at 11:53 pm #2116349

No problem, see private field information

February 13, 2022 at 1:25 pm #2117042

Due to the limitation of CSS, I think it's the best CSS can do.

Anything beyond this, a custom solution to modify the current menu JS is required which is out of the scope of the support forum Unfortuanly.

February 13, 2022 at 1:30 pm #2117050

I was kinda expecting this, thanks for the help!

February 14, 2022 at 5:14 am #2117757

I experimented a bit with JS (added below code within the wp_footer hook)
This script is working for me:

I removed the custom CSS. Your CSS suggestion helped me creating this custom JS code, thanks again!


<script>
	var menu = document.getElementById('generate-slideout-menu').getElementsByClassName('current-menu-parent')[0];
		if(menu){
			menu.classList.toggle('sfHover');
			var submenu = menu.getElementsByClassName('sub-menu')[0];
			submenu.classList.toggle('toggled-on');
		}
</script>

February 14, 2022 at 10:40 am #2118394

Awesome!

Thanks for sharing :)

This archived topic is closed to new replies.

Start building better websites today.