FROM CACHE - en_header

DAWN theme navigation

Solved
smj_90
Shopify Partner
43 1 7

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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
Replies 51 (51)
BTMR
Tourist
3 0 0

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
New Member
4 0 0

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
Tourist
7 0 0

@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
Shopify Partner
43 1 7

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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
TanjaSalty
Tourist
7 0 0

@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
Shopify Partner
43 1 7

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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
TanjaSalty
Tourist
7 0 0

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

smj_90
Shopify Partner
43 1 7

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>

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
smj_90
Shopify Partner
43 1 7

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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
smj_90
Shopify Partner
43 1 7

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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
smj_90
Shopify Partner
43 1 7

@happylifemask check my recent post

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
smj_90
Shopify Partner
43 1 7

@qaiser1 

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

 
If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
TanjaSalty
Tourist
7 0 0

@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
Shopify Partner
43 1 7

@TanjaSalty Share your URL please.

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
TanjaSalty
Tourist
7 0 0
smj_90
Shopify Partner
43 1 7

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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
TanjaSalty
Tourist
7 0 0

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

smj_90
Shopify Partner
43 1 7

@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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
Shopinista
New Member
2 0 1

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
Shopify Partner
43 1 7

@Shopinista share your url

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂