hye
on hover submenu should be shown when i put cursor on my megamenu categories, similarly for all submenu’s
regards
Topic summary
A user needed help implementing hover functionality for a mega menu, where submenus would display when hovering over categories (similar to a reference site they provided).
Solutions Provided:
- One responder suggested adding custom code to the theme.liquid file before the closing tag
- Another provided JavaScript code to be added to globals.js that uses event listeners for ‘mouseenter’ and ‘mouseleave’ on header menu details elements
Initial Issue:
After implementing the code, it only worked for one category (BJJ Gorye) but failed on another (Streetwear)
Resolution:
The issue was resolved after further assistance, with the user confirming the solution worked and thanking the contributors.
Go to your Online store > Theme > Edit code, open theme.liquid file, add this code before element, save your file
Hey @zikriarathore ,
Go to Edit Code on your theme and look for “globals.js” and paste the following code at the end of that file.
const details = document.querySelector('header-menu details');
details.addEventListener('mouseenter', function() {
this.setAttribute('open', '');
const summary = this.querySelector('summary');
if (summary) {
summary.setAttribute('aria-expanded','true');
}
});
details.addEventListener('mouseleave', function() {
this.removeAttribute('open', '');
const summary = this.querySelector('summary');
if (summary) {
summary.setAttribute('aria-expanded','false');
}
});
Image for reference.
check my store again , i inserted that code.it is working for only 1 category bjj ,if you put cursor on streetwear it doesnot work. please check
worked thanks
1 Like
You are very welcome