How to make the dropdown headers clickable in Dawn Theme

zgoetz
Shopify Partner
2 0 0

Hello!

 

This is my site: https://bc152b.myshopify.com/

 

I would like to do this. Do you see the navigation header at the top that says: Home, Products, Services, About Us, Gallery, Contact Us?

 

The Products, Services, About Us have dropdowns. I want it so that:

- If you hover the cursor over it, the menu will dropdown

- If you click on it, it will go to the page, that I set in the Navigation settings in Shopify.

 

I tried coding some stuff in header.liquid . I got the hover working, but I am not quite sure how to make the header clickable to another page. Please help!

 

Thank you!

Reply 1 (1)

zgoetz
Shopify Partner
2 0 0

If this helps,

 

I added this code at line 352 in header.liquid, under the </{% if section.settings.sticky_header_type != 'none' %}sticky-header{% else %}div{% endif %}>:

It makes the headers dropdown when the cursor is hovered over.

 

<script>
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
let dropdownItems = document.querySelector(".header__submenu");
items.forEach(item => {
item.addEventListener("mouseenter", () => {
item.setAttribute("open", true);
let ulElement = item.querySelector("ul");
if (ulElement !== null) {
ulElement.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
}
});
item.addEventListener("focus", () => {
item.setAttribute("open", true);
});
item.addEventListener("blur", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseenter", () => {
item.setAttribute("open", "");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
if (dropdownItems !== null) {
dropdownItems.addEventListener("mouseleave", () => {
items.forEach(item => {
item.removeAttribute("open");
});
});
}
</script>