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

[BTMR]

Hi @dmwwebartisan I've added the additional code but have encountered the following issues

Desktop

The parent only will open when clicked (not able to hover), it renders an arrow indicating a submenu but this is not clickable and you can't see the submenu.

When you click onto the parent then the new Parent (child) is visible, but not clickable, and the new child (grandchild) is clickable.

Mobile

Not able to access the menu, when clicking the three parallel lines, nothing happens.

Any assistance would be greatly appreciated.

Thank you.

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

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

[smj_90]

you might need to add a class and define rules for that. share your url, i'll share the css code.

[smj_90]

@happylifemask check my recent post

[smj_90]

@qaiser1 

you might need to add a class and define rules for that. share your url, i'll share the css code.

[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

[TanjaSalty]

Thank you so so much! It worked! 🙏🏽 Great support! Thanks a lot @smj_90 !!

[smj_90]

@TanjaSalty most welcome 🙂

Kindly mark that reply as accepted solution so that anyone else looking for the fixing in mobile version can easily navigate through without going to the whole conversation

[Shopinista]

The styling CSS doesn't seem to work in Dawn 4.0. Are there any other options? The URL's are now mighty fine and purple🙂

(The URL clickable fix does work!)

[smj_90]

@Shopinista share your url