DAWN theme navigation

Solved
smj_90
Shopify Partner
45 1 13

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 🙂
Accepted Solution (1)
dmwwebartisan
Shopify Partner
11482 2435 3524

This is an 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!

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 54 (54)
dmwwebartisan
Shopify Partner
11482 2435 3524

@smj_90 

Please share store URL.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
smj_90
Shopify Partner
45 1 13
https://furnicio.myshopify.com/
If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
dmwwebartisan
Shopify Partner
11482 2435 3524

@smj_90 

Please share store front password.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
smj_90
Shopify Partner
45 1 13

Screenshot.png

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
dmwwebartisan
Shopify Partner
11482 2435 3524

@smj_90 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
smj_90
Shopify Partner
45 1 13

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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
dmwwebartisan
Shopify Partner
11482 2435 3524

@smj_90 

check following screenshot

2021-10-17_21-17_dmwstore1 ~ Main menu.jpg

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
smj_90
Shopify Partner
45 1 13

i have set navigation from backend!

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

no anchor,

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
dmwwebartisan
Shopify Partner
11482 2435 3524

This code customization work

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
11482 2435 3524

This is an 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!

 

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
smj_90
Shopify Partner
45 1 13

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.

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
dmwwebartisan
Shopify Partner
11482 2435 3524

@smj_90 

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

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
dmwwebartisan
Shopify Partner
11482 2435 3524

@smj_90 

if add css or code any file please remove it

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
smj_90
Shopify Partner
45 1 13

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>

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
dmwwebartisan
Shopify Partner
11482 2435 3524

@smj_90 

ok, Great!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Solanum
Shopify Partner
2 0 0

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
Shopify Partner
45 1 13

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.

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
Solanum
Shopify Partner
2 0 0

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 🙂

TanjaSalty
Tourist
7 0 0

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
Shopify Partner
45 1 13

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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
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?

smj_90
Shopify Partner
45 1 13

@happylifemask check my recent post

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
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
45 1 13

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
45 1 13

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
45 1 13

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
45 1 13

@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 🙂
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
45 1 13

@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
45 1 13

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
45 1 13

@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
45 1 13

@Shopinista share your url

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

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!

 

 

smj_90
Shopify Partner
45 1 13

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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
nathan1001
Tourist
4 0 0
Thanks @smj_90 — Site is in preview mode. Hope this works: https://qxvlt7lgq9v39fwb-2582806643.shopifypreview.com <>





smj_90
Shopify Partner
45 1 13

@nathan1001 

 

Go to line # 118

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>

 

go to your base.css

add this at the bottom of the file

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

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
Gam696
Tourist
6 0 4

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

smj_90
Shopify Partner
45 1 13

@Gam696 

Go to line # 118

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>

 

go to your base.css

add this at the bottom of the file

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

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

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 <a> tag in?

 

Thanks,

 

Andrew

 

EDIT:

 

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

 

Line 165

Original

 

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

 

Changed to

 

<summary class="menu-drawer__menu-item link link--text list-menu__item focus-inset">
<a href="{{ childlink.url }}" style="padding-left: 0;" class="menu-drawer__menu-item link link--text list-menu__item focus-inset{% if childlink.current %} menu-drawer__menu-item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
{{ childlink.title | escape }}
</a>
{% render 'icon-arrow' %}
{% render 'icon-caret' %}
</summary>

 

Line 419

 

Original

 

<summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">
<span>{{ childlink.title | escape }}</span>
{% render 'icon-caret' %}
</summary>

 

Changed to


<summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">
<a href="{{ childlink.url }}" style="padding-left: 0;" class="header__menu-item list-menu__item link link--text focus-inset caption-large{% if childlink.current %} list-menu__item--active{% endif %}"{% if childlink.current %} aria-current="page"{% endif %}>
{{ childlink.title | escape }}
</a>
{% render 'icon-caret' %}
</summary>

 

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

AceLearns
New Member
5 0 0

same problem 

Andrew136
New Member
2 0 0

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

AceLearns
New Member
5 0 0

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

AceLearns
New Member
5 0 0

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

 

AceLearns
New Member
5 0 0

Nevermind it works! thnx!

qaiser1
Tourist
5 0 1

hi, 

 

this is working but the color and font size changed. how to solve that

 

smj_90
Shopify Partner
45 1 13

@qaiser1 send me the link, i'll check and let you know.

If this helped you, please
mark this reply as 'Accepted Solution'
Thanks 🙂
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.

smj_90
Shopify Partner
45 1 13

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
45 1 13

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