Users are seeking to make dropdown menu items clickable in Shopify’s Refresh theme after implementing hover functionality. Currently, clicking parent menu items only toggles the dropdown instead of navigating to the linked page.
Solution Provided:
header.liquid file by wrapping menu item titles in <a> tags with proper href attributesbase.css to fix link colors<a href="{{ link.url }}">{{ link.title | escape }}</a>Outstanding Issues:
header.liquid filesThe discussion remains open with unresolved questions about mobile implementation and code location variations across different Refresh theme versions.
I used the code found here to make the dropdown menu open on hover and it worked great but now I would like the menu dropdown links to be clickable as well. Right now if you click on them it still opens and closes the dropdown menu instead of going to that selected page.
Thanks!
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
Here is my store link with a temporary password.
Testing Site: https://sugarbliss-cakes.myshopify.com/
Password: cheode
Thanks!
Can you specify which dropdown menu items you want to click? We found the menu items to work fine. Please provide us with detailed information, and we will check it for you.
I would like the top Menu button to be clickable and take you to the Menu page (https://sugarbliss-cakes.myshopify.com/pages/menu), right now if you click on the word Menu, it just opens the dropdown menu. Then also in the Menu dropdown, the Local Pickup & Delivery and the Nationwide links are actual pages that need to be clickable as well as the Event Services and About. Right now if you click on those links it just opens the dropdown menu instead of opening the page.
For example, on this WordPress site (https://boutiquephotographer.com/) if you hover over the menu item it expands the dropdown menu but you can also click on it to take you to that page.
Thanks for your help!
To make the dropdown menu item clickable, you can try the following:
1. Online Store → Themes → Edit Code:
{{ link.title | escape }}
Put tag with href as your link into a tag similar to this and click Save:
[{{ link.title | escape }}](https://sugarbliss-cakes.myshopify.com/pages/menu)
.header__menu-item a:first-child{
color: #3f2814;
}
I hope that it will work for you.
This worked great, thank you!
The only thing I changed was I changed the href link so it referenced the link URL:
<span {%- if link.child_active %} class=“header__active-menu-item”{% endif %}>{{ link.title | escape }}
Hi there, I implemented your fix for making a dropdown menu item clickable & fixed the color as per your suggestion. That worked great! However, even after removing the hover underlines for all the menu navigation items, the one dropdown item that I made clickable (the “livestock” menu item) still has a thick underline when I hover. I can’t seem to get it to go away even with the other pieces of code I added to base.css (shown below) any ideas? website url : http://www.wildherdtx.com
.header__active-menu-item{
text-decoration: none !important;
}
.header__menu-item:hover span {
text-decoration: none !important;
}
.site-nav__label{
border-bottom: 0px !important;
}
Thanks for any help!
Hi @opkramer ,
Can you kindly share the details of your problem with us in another post? We will check it directly and suggest you a solution if possible.
P/s: Pls tag us in your new post in order to let us know. Thank you in advanced
Hi!
I had the same question and implemented this for my webshop www.bespareninhuis.nl. It works, thanks for that info. But, on the mobile version it’s still the same. The main menu item is not clickable. Do you have a solution for this?
Hi there
same need here, but in taht theme “Refresh” I can not find any of the code you are refering to, thanks
Hi, I have this exact issue with my refresh themed store. But I cannot find the code you mention should be in my header.liquid file.
Can you help me with this?