Here is a simple solution. Go to the bottom of assets/base.css and replace this code:
details >.header__menu-item a {
color: inherit;
}
details[open]>.header__menu-item {
text-decoration: none;
}
With this code:
details >.header__menu-item a {
color: inherit;
}
Basically just delete the last 3 lines I told you to put. Only the first 3 lines were necessary. (Sorry about that error.)
However, what you are trying to achieve will undoubtedly, no matter who else helps you, cause a much bigger issue for your website. I can help you fix it though. To explain why this happens... First of all, if you set the menu headers to open up to a new page when you click on them, it will never open up the menu sub-categories when you click on them, because it will take you to the new page instead. It might open the sub-menu if you click on the tiny little arrows next to it, but many people won't know to do that. They will just click on the main word and be taken to that bigger page rather than ever getting to see the sub-menu. Very little people using your site will ever get to know your sub-menu even exists. And that is an issue. I have a really good solution for this though, but it's a complex solution. It will require a lot of steps and a lot more work than you were probably expecting, but I promise you that it is worth it and if you try it you will be happy with it, and I already implemented it to my own website too.
So here's the solution. Turn your menu into an 'open upon hover' menu.
By eliminating the requirement to click on the menu headers to open the menu, you are opening up the opportunity to take people to a new page when they click on it, while still allowing them see your menu open up as they hover their mouse over the menu headers. Then I have taken steps to ensure that this won't ruin user experience on touch-screen devices. It's also nice because the user will access your sub-menu a lot more easily. It's very convenient.
Step 1 - Prepare:
Create an 'Exact Copy' or a 'Most Updated Version of your Theme Copy' and make all the following changes to the copy, just to err on the safe side. If you don't like it, you can always just delete the copy and stick to what you have in the original. If you don't know how to make a copy, let me know and I'll walk you through it.
Step 2 - Turn your menu into an 'open upon hover' menu:
Open file sections/header.liquid and find </header> in the code. Then go to the very next fresh line you can find after </header> and paste the following code in that space. For reference, the next line with no code should be just 2 lines below </header> :
<script>
let items = document.querySelector(".header__inline-menu").querySelectorAll("details");
console.log(items)
items.forEach(item => {
item.addEventListener("mouseover", () => {
item.setAttribute("open", true);
item.querySelector("ul").addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
item.addEventListener("mouseleave", () => {
item.removeAttribute("open");
});
});
});
</script>
Then test out that this works before moving on to the next step. Hover your mouse over the menu and see that it pops up on its own without you having to click on it.
Step 3 - Make sure you have the right code for 'clickable menu categories' based on your theme's version: So you know how they gave you this code below to put in snippets/header-dropdown-menu.liquid ? Keep it this way IF YOU ARE USING AN OLDER VERSION OF YOUR THEME :
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<a
href="{{ link.url }}"
style="text-decoration: unset;"
>
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
</a>
{% render 'icon-caret' %}
</summary>
OR REPLACE IT WITH THIS ONE BELOW IF YOU ARE USING THE MOST UP-TO-DATE VERSION OF YOUR THEME + YOU PLAN ON CONTINUALLY UPDATING YOUR THEME'S VERSION. (There is a minor difference in the code, but this minor difference will prevent your website from looking terrible and glitchy if you are staying up to date with your theme versions.) :
<summary
id="HeaderMenu-{{ link.handle }}"
class="header__menu-item list-menu__item link focus-inset"
>
<a
href="{{ link.url }}"
style="text-decoration: unset;"
>
<span
{%- if link.child_active %}
class="header__active-menu-item"
{% endif %}
>
{{- link.title | escape -}}
</span>
</a>
{{- 'icon-caret.svg' | inline_asset_content -}}
</summary>
Double check after this step that your website still looks good.
Step 4 - (This step is mandatory no matter which version you have.) If you haven't done this already, take this code that I told you to put at the bottom of assets/base.css
details >.header__menu-item a {
color: inherit;
}
details[open]>.header__menu-item {
text-decoration: none;
}
And replace it with this:
details >.header__menu-item a {
color: inherit;
}
Step 5 - The following code is to ensure that the menu changes only apply when using a mouse and never when using touch screen, which is VERY IMPORTANT for the menu's functionality on landscape mode on iPads and all other devices that use touch screen:
Go to the file layout/theme.liquid and scroll to the very bottom where it says </body> and paste the following code JUST ABOVE </body> (make a line of space for it right above it) :
<script>
document.addEventListener('DOMContentLoaded', function () {
const menuItems = document.querySelectorAll('.header__menu-item a');
menuItems.forEach(item => {
let touchCount = 0;
item.addEventListener('click', function (event) {
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints;
const isMouseClick = event instanceof MouseEvent;
if (isTouchDevice) {
touchCount++;
if (touchCount === 1) {
event.preventDefault();
this.parentElement.querySelector('.list-menu').classList.toggle('open');
} else if (touchCount === 2) {
touchCount = 0;
}
}
if (isMouseClick) {
touchCount = 0;
}
});
});
});
</script>
This should make the main menu work on touch screens (when you touch it with your finger once it opens the menu and when you touch it twice it takes you to the page instead and it resets after that), and this code also ensures that clicks with a mouse on PC works on Firefox (The code that person gave you does not work on Firefox for some reason, but my javascript code fixes the issue).
If you want me to, I can test your website out for you on all devices and browsers after you make the changes, to ensure for you that it works everywhere.
If my explanations on where to place the codes weren't clear enough, like the one for </header> or </body> or you're nervous about placing it, I can provide screenshots.
