Drop-down menu without link

E_Chaker
Shopify Partner
1 0 0

Thank you soo much

0 Likes
Ninthony
Shopify Partner
2240 337 895

It's a little bit annoying for the link to be necessary. There are some cases where you could still want to pull information from a link list and not have it link to anything. For instance, I'm working on a navigation with a sticky nav. I don't want to have my link list link to "#" because that will take you to the top of the page. So if you're clicking on some of my links and you're at the bottom of the page, you'll be yanked to the top. 

To get around this, my solution right now is to use some jquery on the page load to see if there's any <a> tags that have a hash set for their href, and if they do, change the contents to "javascript:;" which doesn't pull you to the top of the page. This is not desireable, but I don't see what else I can do as some of my items in that link list SHOULD link somewhere, but some should open another menu. 

If anyone know's a different solution, I'd love to hear from you. Here is my code Im running to switch out the hashes at the beginning of my javascript file. 

$('a').each(function(){
var link = $(this)[0].attributes[0].value;
if(link === "#"){
$(this)[0].attributes[0].value = "javascript:;"
}
})

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
christinezed
New Member
1 0 0

Hi @Ninthony, did you manage to find a solution for this? I'm having exactly the same problem.

 

 

0 Likes
Ninthony
Shopify Partner
2240 337 895
My solution was to link it to the hash, but when I'm in the loop for my link list I wrap each side of the anchor tags in an if statement that checks for the hash, so they dont appear if it does, kind of like:

{% if link.url != '#' %}
<a href ="{{ link.url }}">
{% endif %}
{{ link.title }}
{% if link.url != '#' %}
</a>
{% endif %}

This way it still will echo out the link, but will only put an anchor tag if the link.url does not equal a hash.
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
Kaenja
New Member
1 0 0
Thank You sooo much. Worked for me as well. So happy!!!
0 Likes
DavidB1
Shopify Partner
5 0 1

Thank you ebellest, i was stuck on this.

0 Likes
31-Flavours
New Member
1 0 0

Hi Ninthony, 

 

I'm using the # in the (top level) nav links, but don't want it as a hover/clickable link with mouse on desktop, I just want it as text, so users know it's a heading not a menu item. 

 

Just wondering where you INSERTED your code? To make this work?

 

Big Thanks! 31F!

0 Likes
Allan-EP
Shopify Partner
11 0 17
.selector{
 pointer-events: none;
}

Is also a good option for using # in the link when you don't want the item to respond to clicks/taps. 

0 Likes
cl4udio
New Member
1 0 0

The instructions of @eballeste1 at 03-10-2018 02:15 AM works fine in june 2020!

 

Thanks for this.

0 Likes
Alannah1
New Member
1 0 0

Hi Liam - are there current ways to do this?

 

Just tried # hack on Main Menu and Sub menu and didn't work on either 

0 Likes