Solved

Menu not selecting since i added a drop down

ocnuk
New Member
14 0 0

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!

ocn products.png

Accepted Solution (1)
Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

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:

Ninthony_1-1631799152105.png

Right there at the bottom, you're looking for that <span class="site-nav__label"> -- Delete that line, and just put this in it's place. It's the same code just with an anchor tag wrapped around it:

<a href="{{ link.url }}"><span class="site-nav__label">{{ link.title | escape }}</span>{% include 'icon-chevron-down' %}</a>

 

Should be good to go. Let me know if you have any issues.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 20 (20)

Ninthony
Shopify Partner
2329 350 1023

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

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
ocnuk
New Member
14 0 0

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. 

 

Ninthony
Shopify Partner
2329 350 1023

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?

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
ocnuk
New Member
14 0 0

No problem, I am using debut theme. 

would you know what code I need to add and whereabouts? 

Appreciate your help! 

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

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:

Ninthony_1-1631799152105.png

Right there at the bottom, you're looking for that <span class="site-nav__label"> -- Delete that line, and just put this in it's place. It's the same code just with an anchor tag wrapped around it:

<a href="{{ link.url }}"><span class="site-nav__label">{{ link.title | escape }}</span>{% include 'icon-chevron-down' %}</a>

 

Should be good to go. Let me know if you have any issues.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
ocnuk
New Member
14 0 0

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!!

Ninthony
Shopify Partner
2329 350 1023

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

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
ocnuk
New Member
14 0 0

Yes my webiste is https://www.oncloudnineuk.co.uk/

 

thank you, appreicate the help

Ninthony
Shopify Partner
2329 350 1023

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%;
}

 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
ocnuk
New Member
14 0 0

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

underline.PNG

Ninthony
Shopify Partner
2329 350 1023

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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
ocnuk
New Member
14 0 0

that just gets rid of the underline completely.

 

Not to worry mate, still happy that the underline is animated. appreciate that

Ninthony
Shopify Partner
2329 350 1023

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 : )

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
ocnuk
New Member
14 0 0

i cant seem to find that mate, thank you though!

antonly12
New Member
13 0 0

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

rusticokieroots
Visitor
1 0 0

What if the code doesn't have a site-nav.liquid?

Ninthony
Shopify Partner
2329 350 1023

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.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
cubicleculture
Visitor
2 0 0

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

cubicleculture
Visitor
2 0 0

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?!

smj_90
Shopify Partner
54 1 15

https://community.shopify.com/c/shopify-design/dawn-theme-navigation/m-p/1534872#M407028

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂