A user encountered an issue where adding a dropdown menu to their navigation caused the parent ‘Products’ link to become unclickable in the Debut theme.
Root Cause:
The theme wasn’t using an anchor tag for the parent menu item when a dropdown was present, instead using a span element.
Solution Provided:
site-nav.liquid in the Snippets folder (around line 27)Additional Customization:
The user also requested an animated underline effect on hover. Custom CSS was added to theme.css.liquid to create a centered, expanding underline animation. A minor adjustment removed the persistent underline on active pages.
Later Comments:
Several users noted this solution doesn’t apply to newer themes like Dawn (2023+), as theme structures differ significantly. For Dawn and other modern themes, different code modifications are required, with one user linking to a separate discussion thread addressing Dawn-specific navigation issues.
Hi,
I’ve added a drop down menu to my products which is working fine, however since its been added the products button itself isnt working.
Would any one know why? I have added image for refrence. Yellow highlights are working, the blue isn’t.
Thanks in advance!
Probably because you have to click to open the dropdown menu, and if that were linked it would take you to another page no? Just add a “View All” as your top link and link it to /collections/all
Hi,
The ‘product’ tab is linked to all collections just nothing happens when I click it.
The drop down works when I hover over it so I don’t have to click. I just thought when I click on product it should go to view all collections.
It should if it’s a hover effect, I assumed it had to be clicked to open. There must be a condition in the code somewhere to not add an anchor tag to the parent element if there’s a dropdown menu for whatever reason. You’ll have to go into the code and add it in yourself. What theme are you using?
No problem, I am using debut theme.
would you know what code I need to add and whereabouts?
Appreciate your help!
See, on my Debut theme, I have to click to get the dropdown menu to appear. Maybe they did away with that on an update, I dunno. Whatever the case, if you want to make the first link clickable you have to go to Online Store > Actions > Edit Code on the theme you want to edit. Open your Snippets folder and open site-nav.liquid – You’re going to want to scroll to about line 27, for me anyway. It’ll look like this to you:
Right there at the bottom, you’re looking for that – Delete that line, and just put this in it’s place. It’s the same code just with an anchor tag wrapped around it:
{{ link.title | escape }}{% include 'icon-chevron-down' %}
Should be good to go. Let me know if you have any issues.
thats worked! - Thank you.
There is one other thing i am trying to do, would you be able to help?
So, when you hover over the menu items there is an underline. I was wanting to animate the line. See this website for refrence.
https://www.tastecrate.com.au/shop-category
Thanks in advance!!
Can you post a store url, I’m not entirely sure my Debut is up to date. I’ll need a password if password protected also, which you can find in Online Store > Preferences > Password Protection
Yes my webiste is https://www.oncloudnineuk.co.uk/
thank you, appreicate the help
Paste this at the bottom of your theme.css.liquid file:
.site-nav__label {
position: relative;
padding-bottom: 2px;
border-bottom: none
}
.site-nav__link--active .site-nav__label {
border-bottom: none;
}
.site-nav__link--button:hover{
border-bottom:none;
}
.site-nav__link--active .site-nav__label::after {
content: "";
position: absolute;
transform: translateX(-50%);
width: 100%;
height: 2px;
background-color: #111;
bottom:0;
left: 50%;
}
.site-nav__label:after{
content: "";
position: absolute;
width: 0%;
transform: translateX(-50%);
height: 2px;
background-color: #111;
bottom:0;
left: 50%;
transition: .3s width ease;
}
.site-nav__label:hover:after{
content: "";
width: 100%;
}
Hi,
thats worked, thanks! However, when i click a page the underline stays on. Is there a way this can go when your on the selected page? I have attached an image for refrence.
Thank you
Yeah, just delete this part of the code that you pasted:
.site-nav__link--active .site-nav__label::after {
content: "";
position: absolute;
transform: translateX(-50%);
width: 100%;
height: 2px;
background-color: #111;
bottom:0;
left: 50%;
}
That was how the other border was working so I figured you wanted the same kind of deal.
that just gets rid of the underline completely.
Not to worry mate, still happy that the underline is animated. appreciate that
If you just delete what I posted it should work just fine. Only the style referencing:
.site-nav__link--active .site-nav__label::after
I just undid all of those styles in the console and the line is gone, and when you hover it still animates. Whatever though, if you’re happy I’m happy : )
i cant seem to find that mate, thank you though!
hello, i have the same problem but your solutions seems to me does not work in 2023 could you help me please? https://community.shopify.com/c/shopify-design/menu-item-not-working/m-p/1994262#M530410
What if the code doesn’t have a site-nav.liquid?
All themes are different. In this case it wasn’t using an anchor tag to display the first item in the list and using a span. They could be preventing the default action through javascript as well. Someone would need to take a look at your code. What theme are you using? And can you post a link to your site, please post the password to view your site if it’s currently hidden. Note, I mean the password found in Online Store > Preferences > Password – not your username and password for your admin.
hello - this won’t work for dawn theme. i dont see that section to put code in for the dawn theme. Anyone know how to solve?!
hey - this won’t work for dawn theme. i dont see that section to put code in for the dawn theme. Anyone know how to solve?! this is my site and i’m trying to fix it for the ‘collections’ tab - i want the collections top part to show all collections and then the specific dropdowns to link as they are linked… here is my site: www.cubicleculture.co