How to make dropdown menu item clickable in Refresh Theme?

[StreamlineJacks]

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!

[BSS-Commerce]

Hi @StreamlineJacks 

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.

[StreamlineJacks]

Here is my store link with a temporary password.

Testing Site: https://sugarbliss-cakes.myshopify.com/

Password: cheode

Thanks!

[BSS-Commerce]

Hi @StreamlineJacks 

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.

[StreamlineJacks]

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!

[BSS-Commerce · Accepted solution]

Hi @StreamlineJacks 

To make the dropdown menu item clickable, you can try the following:

1. Online Store -> Themes -> Edit Code:

2. Find the header.liquid file, in this file, look for the "header__menu-item" classes below the IDs and start with "Details-HeaderMenu", you will see a structure similar to this:

<span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>

Put <a> tag with href as your link into a <span> tag similar to this and click Save:

<span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>
    <a href="https://sugarbliss-cakes.myshopify.com/pages/menu">{{ link.title | escape }}</a>
</span>

3. You can click on the link you want, but for now, its color will be not good, you can fix this by going to the base.css file, adding this code at the end of the file, and clicking Save.

.header__menu-item a:first-child{
  color: #3f2814;
}

I hope that it will work for you.

[StreamlineJacks]

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 %}><a href="{{ link.url }}">{{ link.title | escape }}</a></span>

[opkramer]

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!

[BSS-Commerce]

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

[lisannem]

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? 

[ByRafael]

Hi there

same need here, but in taht theme "Refresh" I can not find any of the code you are refering to, thanks

[ctweber01]

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?