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

[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

[nathan1001]

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]

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

[nathan1001]

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

[smj_90]

@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; }

[Gam696]

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]

@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; }

[Andrew136]

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]

same problem 

[Andrew136]

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]

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

[AceLearns]

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

[AceLearns]

Nevermind it works! thnx!

[qaiser1]

hi, 

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

[smj_90]

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

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

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

@qaiser1 

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