DAWN theme navigation

[smj_90]

I have build a store using dawn theme.

But the problem is when I click the main navigation, the dropdown appears, which Is okay but it's link is disabled.

The link on that anchor doesn't work. I'm talking about the main navigation. 1st child and grandchild links are working fine, but if there is a dropdown level, the parent link doesn't work.

Any way to fix this???

[dmwwebartisan]

@smj_90 

Please share store URL.

Thanks!

[smj_90]

https://furnicio.myshopify.com/

[dmwwebartisan]

@smj_90 

Please share store front password.

Thanks!

[smj_90]

[dmwwebartisan]

@smj_90 

i have check your shop and all link working correctly . please share screenshot which link not working 

Thanks!

[smj_90]

The main parent navigation doesn't work if hey have Child under it.

They open the modal but anchor is disabled. Also, I want the link to open when the user hovers, not when clicked

[dmwwebartisan]

@smj_90 

check following screenshot

[smj_90]

i have set navigation from backend!

just go to the liquid code, it says summary and only {{child.title}}

no anchor,

[dmwwebartisan]

This code customization work

[dmwwebartisan · Accepted solution]

@smj_90 

Please find following code your sections/header.liquid file 

<summary class="header__menu-item list-menu__item link">
     <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
              {% render 'icon-caret' %}
</summary>

Replace to 

<summary class="header__menu-item list-menu__item link">
   <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}><a href="{{ link.url }}" 
   class="header__menu-item header__menu-item ">{{ link.title | escape }}</a></span>
  {% render 'icon-caret' %}
</summary>

Thanks!

[smj_90]

I did this too, but this will not work. as on click drop down also opens and it will have link too, so for dropdown, if i click, then it will navigate to the url but the dropdown will not work.

[dmwwebartisan]

@smj_90 

ok i will check your problem but click on arrow drop down open

[dmwwebartisan]

@smj_90 

if add css or code any file please remove it

Thanks!

[smj_90]

hey i have done it. check the website now, link is also added and on hover the menu opens instead of clicking, and the url is also working now!

check, i will share the code too. i have removed the <summary> element, and converted it into <div>

[dmwwebartisan]

@smj_90 

ok, Great!

[Solanum]

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.

[smj_90]

Hi @Solanum you need to make the element <summary> to be <div>, and then add some css, for the <div> 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.

[Solanum]

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-dropd... That did the trick as well 🙂

[wasimkhann]

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

[TanjaSalty]

Dear @DM Thanks for the solution! It works on desktop now, yet on mobile, if clicking on the parent collection, still the sub-collections appear and it is not possible to click on the parent collection and see all products at once/ main collection as on desktop. Any solutions? THANK YOU! 

[smj_90]

@TanjaSalty please share the link so that i can further investigate.

Also, please make sure you're doing this work in DAWN theme at line#305

because same code is available at line#95 but it's for mobile menu.

May be that's the reason your code is not working.

[happylifemask]

I was following this thread and we have also the problem which I can't solve myself. Did someone manage do figure it out working on the mobile breakpoint?

[smj_90]

@happylifemask check my recent post

[TanjaSalty]

@smj_90 Any updates or ideas on how to make it work in the mobile dawn theme? That the parent category is clickable? 

[smj_90]

Yes, I did. Sorry I was away and for not replying.

[TanjaSalty]

@smj_90 Could you be so kind as to share the solution how to make the parent category mobile version clickable? That would be amazing. 

[smj_90]

Sure @TanjaSalty , please tell me for which version of dawn theme you need the code?

[TanjaSalty]

@smj_90 It would be Dawn version 2.3.0 - your support is highly appreciated! 

[smj_90]

Go to line # 114

replace the code

<summary class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}">
{{ link.title | escape }}
{% render 'icon-arrow' %}
{% render 'icon-caret' %}
</summary>

with this

<summary class="menu-drawer__menu-item list-menu__item link link--text focus-inset{% if link.child_active %} menu-drawer__menu-item--active{% endif %}">
<a href="{{ link.url }}">{{ link.title | escape }}</a>
{% render 'icon-arrow' %}
{% render 'icon-caret' %}
</summary>

[smj_90]

@TanjaSalty  share me the link of your store, so that i can further check. I guess you might need to add some custom css for the link, as at my end it's showing in purple color!

Le me know if the issue have been fixed!

[TanjaSalty]

@smj_90  Thank you very much!!! The mobile parent is now clickable, only thing is the font color is not the same as the other elements in the menu now and I had to pass the code in line 102 to make it work. 

I know it is a small detail, but is it possible to change the font color in the mobile menu of the clickable parent, so that the branding is all the same resp. font color? 

[smj_90]

@TanjaSalty Share your URL please.

[TanjaSalty]

@smj_90 https://www.saltysports.com Thank you. 

[smj_90]

go to your base.css

add this at the bottom of the file

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

This will fix your issue