Menu not selecting since i added a drop down

Solved
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

0 Likes
Ninthony
Shopify Partner
2239 337 895

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 :D
0 Likes
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. 

 

0 Likes
Ninthony
Shopify Partner
2239 337 895

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 :D
0 Likes
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! 

0 Likes
Ninthony
Shopify Partner
2239 337 895

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

0 Likes
Ninthony
Shopify Partner
2239 337 895

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 :D
0 Likes
ocnuk
New Member
14 0 0

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

 

thank you, appreicate the help

0 Likes
Ninthony
Shopify Partner
2239 337 895

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 :D
0 Likes