How can I fix the disabled link in Dawn theme's main navigation dropdown?

Store Design
41

Hi @smj_90 - thanks for this! I am using Dawn 5.0. The solution seems to work in mobile but on desktop, clicking the main menu still opens the dropdown and will not take me to the parent page.

Note, for me the lines of code were on #118 - not 114 (not sure if that matters).

Thanks!

42

@nathan1001 hi there, share your store link, so that i can help and check into the issue

43

Thanks @smj_90 — Site is in preview mode. Hope this works: https://qxvlt7lgq9v39fwb-2582806643.shopifypreview.com <>

44

@nathan1001

Go to line # 118

replace the code

{{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

with this

{{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

go to your base.css

add this at the bottom of the file

.menu-drawer summary a{ color: currentColor; text-decoration: none; }

1 Like
45

Hi Smj_90

Hope its ok to jump on this thread I have the same issues I have done what you have suggested above and it works perfectly on mobile but not on desktop is there something else I need to do?

Thank you in advance

46

@Gam696

Go to line # 118

replace the code

{{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

with this

{{ link.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

go to your base.css

add this at the bottom of the file

.menu-drawer summary a{ color: currentColor; text-decoration: none; }

47

what about Dawn 6.0.2 a code that fixes the problem for mobile version aswell, thanks a lot!

48

Nevermind it works! thnx!

49

Hi @smj_90 ,

I’m using Dawn 6.0.2 and followed these instruction which has partly fixed my problem.

The menu I’m using is 3 levels deep and only the child links were working. Following these instructions the top level parent link now works as well but the sub link under that don’t work. So the grandparent links now work fine, the parent links do not work and the grandchild links work fine. Do you know which code will need to be altered to add the tag in?

Thanks,

Andrew

EDIT:

Actually think I’ve sorted this now by making the following changes

Line 165

Original

{{ childlink.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

Changed to

 {{ childlink.title | escape }} {% render 'icon-arrow' %} {% render 'icon-caret' %}

Line 419

Original

{{ childlink.title | escape }} {% render 'icon-caret' %}

Changed to

{{ childlink.title | escape }} {% render 'icon-caret' %}

Hopefully that’s OK - I added the inline style just to get a quick fix on it.

50

same problem

51

Hi @AceLearns I think I’ve sorted that although Shopify is all new to me - have a look at my reply above and see if that helps…

What I can’t understand is how something so basic doesn’t just work out of the box…?? :roll_eyes:

52

yea right? like this should be a no brainer, alright ill try to see thnx!

53

How did you add the “on hover”? I would like to implement that, too!
I want to open the submenu when a user hovers over it (in addition to the user clicking the icon-caret). That would be a way better user experience. I could not get it done via css.

54

Hi @Solanum you need to make the element

to be
, and then add some css, for the
to be display none in all conditions and div:hover display block conditions, your menu will work fine.

Share your URL so I can suggest the code.
55

Hi! At the weekend I have been searching for a solution and found this one:https://community.shopify.com/c/shopify-design/dawn-theme-how-to-add-the-ability-to-hover-over-dropdown-in/m-p/1334101#M348898 That did the trick as well :slightly_smiling_face:

56

I have same problem too. I need code for 10.0 version dawn theme plz