Someone please help me before I pull my hair out. How do I make the drawer menu in the Dawn theme show on hover instead of click. My website address is https://www.thecountryhomecollection.co.uk/. Please let me know if there is any other informartion you need. Thanks so much in advance.
Topic summary
Goal: Change Dawn theme’s header drawer menu to open on hover instead of click.
Key updates:
- A helper advised this requires substantial changes, suggesting either switching to a Mega Menu (with prior instructions available) or granting collaborator access for direct help.
- After collaborator access was granted, the helper implemented the hover behavior and shared a preview. The requester confirmed it worked as desired.
Follow-up issue:
- Hovering the menu caused the main image to shift. The helper provided specific code edits in assets/global.js, modifying the HeaderDrawer class to add mouseover/mouseleave handlers and adjust open/close logic, focus trapping, aria-expanded, and header classes to prevent layout shifts.
- The helper then applied the fix and asked for confirmation; the requester thanked them.
Outcome:
- Drawer now opens on hover, and the image shift issue was addressed via the provided and applied JavaScript changes.
Status:
- Resolved. Further questions can be directed to the helper. Code changes (global.js, HeaderDrawer) are central to the solution.
Hi @TamsinNewbie ,
This will need a lot of changes, if you want I can help you check it with a collaborator invite.
Or you can switch to Mega menu and follow my previous instructions, it will work fine
1 Like
Hi Namphan,
Thanks for getting back to me and sorry for the late response (I couldn’t face looking at Shopify yesterday after spending an entire day trying to work this out). My code is 3710, i’d really appreciate if you could have a look as I’ve tried so many methods I don’t think I’ll get it right.
Hi @TamsinNewbie ,
I sent the request, when it gets access I will check it
1 Like
Thank you 
1 Like
Wow, that’s exactly what I wanted. Thank you so much!
Can I just be cheeky and ask one more thing. When I hover on the menu button, the main image seems to move? Is that possible to stop?
Hi @TamsinNewbie ,
Please go to Actions > Edit code > assets > global.js file, find ‘HeaderDrawer’ and change function HeaderDrawer:
class HeaderDrawer extends MenuDrawer {
constructor() {
super();
this.querySelector('details').addEventListener('mouseover', this.onMouseOver.bind(this));
this.querySelector('details').addEventListener('mouseleave', this.onMouseLeave.bind(this));
}
onMouseOver(event) {
const summaryElement = event.currentTarget.querySelector('summary');
const detailsElement = event.currentTarget;
const isOpen = detailsElement.hasAttribute('open');
if (isOpen) return;
this.onSummaryClick(event, summaryElement);
}
onMouseLeave(event) {
const summaryElement = event.currentTarget.querySelector('summary');
const detailsElement = event.currentTarget;
const isOpen = detailsElement.hasAttribute('open');
if (!isOpen) return;
this.onSummaryClick(event, summaryElement);
}
onSummaryClick(event, summaryElement) {
const detailsElement = summaryElement.parentNode;
const parentMenuElement = detailsElement.closest('.has-submenu');
const isOpen = detailsElement.hasAttribute('open');
const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
function addTrapFocus() {
trapFocus(summaryElement.nextElementSibling, detailsElement.querySelector('button'));
summaryElement.nextElementSibling.removeEventListener('transitionend', addTrapFocus);
}
if (detailsElement === this.mainDetailsToggle) {
if (isOpen) event.preventDefault();
isOpen ? this.closeMenuDrawer(event, summaryElement, detailsElement) : this.openMenuDrawer(summaryElement, detailsElement);
if (window.matchMedia('(max-width: 990px)')) {
document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
}
} else {
setTimeout(() => {
detailsElement.classList.add('menu-opening');
summaryElement.setAttribute('aria-expanded', true);
parentMenuElement && parentMenuElement.classList.add('submenu-open');
!reducedMotion || reducedMotion.matches
? addTrapFocus()
: summaryElement.nextElementSibling.addEventListener('transitionend', addTrapFocus);
}, 100);
}
}
openMenuDrawer(summaryElement, detailsElement) {
detailsElement.setAttribute('open', true);
this.header = this.header || document.querySelector('.section-header');
this.borderOffset =
this.borderOffset || this.closest('.header-wrapper').classList.contains('header-wrapper--border-bottom') ? 1 : 0;
document.documentElement.style.setProperty(
'--header-bottom-position',
`${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`
);
this.header.classList.add('menu-open');
setTimeout(() => {
this.mainDetailsToggle.classList.add('menu-opening');
});
summaryElement.setAttribute('aria-expanded', true);
window.addEventListener('resize', this.onResize);
trapFocus(this.mainDetailsToggle, summaryElement);
document.body.classList.add(`overflow-hidden-${this.dataset.breakpoint}`);
}
closeMenuDrawer(event, elementToFocus, detailsElement) {
detailsElement.removeAttribute('open');
if (!elementToFocus) return;
super.closeMenuDrawer(event, elementToFocus);
this.header.classList.remove('menu-open');
window.removeEventListener('resize', this.onResize);
}
onResize = () => {
this.header &&
document.documentElement.style.setProperty(
'--header-bottom-position',
`${parseInt(this.header.getBoundingClientRect().bottom - this.borderOffset)}px`
);
document.documentElement.style.setProperty('--viewport-height', `${window.innerHeight}px`);
};
}
If you have any questions, you can contact me directly.
Nice to meet you 
Hi @TamsinNewbie ,
Yes, if you want I can check and change it, it will take extra time to check for this
Hi @TamsinNewbie ,
I changed it, please check and let me know
Thank you
Hi @TamsinNewbie ,
If you have any questions, you can contact me directly.
Nice to meet you
Thanks Namphan. Nice to meet you too.