[Resolved] I want the submenu to stay open.

Hi there,

Is your menu in sidebar? David’s script only works when the menu is in the sidebar.

Hi Urah,

For reference, can you provide the link to where we can see this menu on your site?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

The Script there in the link you provided works to keep the “Curent page” sub-menu open.

To clarify, are you wanting to keep a sub-menu opened until it’s closed regardless of which page is opened?

Hi there,

that toggle function is baked into the dropdown-click script, so it cannot be overwritten.
to make that happen you would need to:

1. Remove the dropdown-click Javscript using this PHP Snippet:

add_action( 'wp_enqueue_scripts', 'tu_remove_menu_scripts', 50 );
function tu_remove_menu_scripts() {
    wp_dequeue_script('generate-dropdown-click');
}

2. Then hook in your own script that doesn’t close the closest opened element. I hacked our script to do that:

! function () {
    "use strict";
    if ("querySelector" in document && "addEventListener" in window) {
        var r = document.body,
            t = function (e, t) {
                e.preventDefault(), e.stopPropagation();
                var n = (t = t || this).closest("li"),
                    o = t.closest("nav").querySelectorAll("ul.toggled-on");
                if (o && !t.closest("ul").classList.contains("toggled-on") && !t.closest("li").classList.contains("sfHover"))

                n.classList.toggle("sfHover");
                e = n.querySelector(".dropdown-menu-toggle");
                "false" !== e.getAttribute("aria-expanded") && e.getAttribute("aria-expanded") ? e.setAttribute("aria-expanded", "false") : e.setAttribute("aria-expanded", "true"), e = n.querySelector(".sub-menu") ? ".sub-menu" : ".children", r.classList.contains("dropdown-click-menu-item") ? t.parentNode.querySelector(e).classList.toggle("toggled-on") : r.classList.contains("dropdown-click-arrow") && n.querySelector(e).classList.toggle("toggled-on")
            },
            e = document.querySelectorAll(".main-nav .menu-item-has-children > a");
        if (r.classList.contains("dropdown-click-menu-item"))
            for (o = 0; o < e.length; o++) e[o].addEventListener("click", t, !0);
        if (r.classList.contains("dropdown-click-arrow")) {
            for (o = 0; o < document.querySelectorAll(".main-nav .menu-item-has-children > a").length; o++) "#" === document.querySelectorAll(".main-nav .menu-item-has-children > a")[o].getAttribute("href") && document.querySelectorAll(".main-nav .menu-item-has-children > a")[o].classList.add("menu-item-dropdown-click");
            for (var n = document.querySelectorAll(".main-nav .menu-item-has-children > a .dropdown-menu-toggle"), o = 0; o < n.length; o++) n[o].addEventListener("click", t, !1), n[o].addEventListener("keydown", function (e) {
                "Enter" === e.key && t(e, this)
            }, !1);
            for (o = 0; o < document.querySelectorAll(".main-nav .menu-item-has-children > a.menu-item-dropdown-click").length; o++) document.querySelectorAll(".main-nav .menu-item-has-children > a.menu-item-dropdown-click")[o].addEventListener("click", t, !1)
        }

        document.addEventListener("click", function (e) {
            e.target.closest(".sfHover") || l()
        }, !1), document.addEventListener("keydown", function (e) {
            "Escape" === e.key && l()
        }, !1)
    }
}();

Glad to hear that 🙂