Hover menu not staying when hovering over the selection

[JGBowie]

softbeginnings.au

landon1

have messed up coding somewhere last issue to fix before opening! 😞 when hovering over it the menu isny remaining open would love help

[theycallmemakka · Accepted solution]

Hi @JGBowie ,

I have written custom code for this solution. Please follow below steps and let me know your feedback.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above tag </head>

<style>
.mega-menu summary.header__menu-item:after {
    content: "";
    position: absolute;
    height: 134px;
    top: 0px;
    width: 100%;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (window.innerWidth >= 768) { // Adjust this value if needed
        document.querySelectorAll('details').forEach(function(d) {
            d.addEventListener('mouseenter', function() {
                d.setAttribute('open', 'open');
            });

            d.addEventListener('mouseleave', function() {
                d.removeAttribute('open');
            });
        });
    }
});
</script>

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka