Not sure its related, but there is a problem in your code (at least one).
sections/header.liquid originally has this code https://github.com/Shopify/dawn/blob/main/sections/header.liquid#L297-L304 :
{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.header = document.querySelector('.section-header');
Yours looks like this:
{% javascript %}
class StickyHeader extends HTMLElement {
constructor() {
super();
}
let items = document
.querySelector(".header__inline-menu")
.querySelectorAll("details");
for (const item of items) {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
item.querySelector("ul").addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
}
Linking code in sections/header.liquid:
<script src="{{ 'menu-dropdown.js' | asset_url }}" defer="defer"></script>
connectedCallback() {
this.header = document.querySelector('.section-header');
Which is a broken code -- open menu on hover code pasted in a wrong place.
Please, restore to original.
If my post is helpful, hit the thumb up button -- it will help others with similar problem to find a solution.I can be reached via e-mail
tairli@yahoo.com
