problem with Dawn header edit following instructions on youtube video

[SkoorySquirrel]

I followed a youtube vlogger's video to edit Dawn header to suit our educational context: basically we'd like the top link to work as well as the children. (Don't know why Shopify doesn't like that too tbh! Why have a top link which doesn't link to anything, why, oh why!?)

Now, the code the vlogger gives worked, but there seems to be a problem. Because when examined carefully it seems that the first <a> clause is pairing with the last </a> and the code does not seem to recognize the </a> and <a> which remain in the middle of the section, as can be seen from the section of the code which is edited in header.liquid --- when I click on the first <a> clause it's taking me all the way to the end and not recognising the first <a/> which should mark the end of its scope.

Would someone who knows these things have a look and recommend a way to make the code better. Also, the code does not work for mobiles, and we'd appreciate if there is an edit to do that too.

<details id="Details-HeaderMenu-{{ forloop.index }}">                   
                    <summary class="header__menu-item list-menu__item link focus-inset">
<a style="color: inherit; box-shadow: none; {%- unless link.child_active or link.active %}text-decoration:underline{% endunless %}" href="{{ link.url }}"><span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                      {% render 'icon-caret' %}
                      </a>                    
                      
   {% comment %}                   <span {%- if link.child_active %} class="header__active-menu-item"{% endif %}>{{ link.title | escape }}</span>
                      {% render 'icon-caret' %}
                            {% endcomment %}
                    </summary>
                    <ul id="HeaderMenu-MenuList-{{ forloop.index }}" class="header__submenu list-menu list-menu--disclosure caption-large motion-reduce" role="list" tabindex="-1">
                      {%- for childlink in link.links -%}
                        <li>
                          {%- if childlink.links == blank -%}
                            <a href="{{ childlink.url }}" 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>
                          {%- else -%}
                            <details id="Details-HeaderSubMenu-{{ forloop.index }}">
                              <summary class="header__menu-item link link--text list-menu__item focus-inset caption-large">

<a style="color: inherit;{%- unless childlink.active or childlink.child_active %}text-decoration:inherit{% endunless %}" href="{{ childlink.url }}">{{ childlink.title | escape }}
                                {% render 'icon-caret' %}</a>
{% comment %}                                 {{ childlink.title | escape }}
                                {% render 'icon-caret' %}      {% endcomment %}
                              </summary>
                              <ul id="HeaderMenu-SubMenuList-{{ forloop.index }}" class="header__submenu list-menu motion-reduce">

 (Please, don't suggest that I hire someone, because I'm trying to understand coding.)

[PaulNewton]

---

@SkoorySquirrel wrote:

..basically we'd like the top link to work as well as the children. (Don't know why Shopify doesn't like that too tbh! Why have a top link which doesn't link to anything, why, oh why!?)te if there is an edit to do that too.

Because making it a link is basically an anti-pattern. For dropdown navigation making the text that opens the dropdown a link itself means some users will never be able to see the submenu because the page navigates everytime the link activates.

And complicates the styling for text that indicates the "active" area in navigation 

If you need a "toplevel" item use a sublink of "All" , "Overview", "Getting Started" etc

See dawns demo store menus https://dawn-theme-default.myshopify.com/collections/shoes 

Where "Shoes" and other menu buttons gets a sub items of "Shop All"

It's great your learning coding a big part of web development is NOT wasting time doing things for a personal aesthetic due to lack of experience.

Rhetorical questions for feature validation - Did any customer ask for this? What is the actual core fundamental problem the customer complained about? how does this solve that without creating more complaints.

When you see some design decision in a theme from a billion dollar company please first consider maybe just maybe they know what they are doing, and second consider that trying to counter that can cause serious UX problems if not outright crippling accessibility. Then think about adding a feature.

Also dawn is open source so you see if the issue is already discussed or directly raise your issue if your convinced some feature should be added

https://github.com/Shopify/dawn 

Most the time if you create an inherent navigation problem it will be completely invisible to you because it works the way YOU expect and in YOUR context, meanwhile customers get annoyed and they wont inform you they just bounce.

[SkoorySquirrel]

Hey @PaulNewton 

Several points:

• We're not selling items that can be grouped as "All products".
• Is there only one way of creating a hierarchy? For example, we may think of the menu as an outline of educational content.
• The way Shopify forces the menu to be is not for us or for our community perhaps?

And a comment:  what's the need to say things like the following?

---

@PaulNewton wrote:

---

It's great your learning coding a big part of web development is NOT wasting time doing things for a personal aesthetic due to lack of experience.

Rhetorical questions for feature validation - Did any customer ask for this? What is the actual core fundamental problem the customer complained about? how does this solve that without creating more complaints.

When you see some design decision in a theme from a billion dollar company please first consider maybe just maybe they know what they are doing, and second consider that trying to counter that can cause serious UX problems if not outright crippling accessibility. Then think about adding a feature.

Also dawn is open source so you see if the issue is already discussed or directly raise your issue if your convinced some feature should be added

Most the time if you create an inherent navigation problem it will be completely invisible to you because it works the way YOU expect and in YOUR context, meanwhile customers get annoyed and they wont inform you they just bounce.

---

I may have become a humble squirrel in this life, but I've worked in various capacities in others.

There seems to be a genuine issue with the code. I had emailed the vlogger before asking the forum. I'm new to coding but I understand mathematical logic. I'd really appreciate it if someone can have a look and give a hand. Source of the code is: Hover Dropdown Shopify Dawn Theme Pt. 2 - Making Title Menu Items Clickable - YouTube

[PaulNewton]

---

@SkoorySquirrel wrote:

 it seems that the first <a> clause is pairing with the last </a> and the code does not seem to recognize the </a> and <a> which remain in the middle of the section, as can be seen from the section of the code which is edited in header.liquid --- when I click on the first <a> clause it's taking me all the way to the end and not recognising the first <a/> which should mark the end of its scope.

When the html may be malformed you need to 

• View the rendered html source(ctrl+U in most browsers) of the site and find that area of html
• Validate a version of the theme from BEFORE you made these changes https://validator.w3.org/
• Validate the website https://validator.w3.org/ , and that fragment of code https://stackoverflow.com/questions/8061087/do-you-know-a-html-snippet-validator ->> https://validator.w3.org/#validate_by_input+with_options 
• Take the code of liquid snippet and remove all the liquid so you can examine what the pure underlying html structure is like to spot issues such as missing quotes, greater than signs(>), closing tags, or improper nesting etc.

[SkoorySquirrel]

@PaulNewton 

As I already said in my reply above to your first response:

There seems to be a genuine issue with the code. I had emailed the vlogger before asking the forum. I'm new to coding but I understand mathematical logic. I'd really appreciate it if someone can have a look and give a hand. Source of the code is: Hover Dropdown Shopify Dawn Theme Pt. 2 - Making Title Menu Items Clickable - YouTube

---

Gee, you've taken the time to write two replies, but neither really seems to help us directly with the issue. Still, thank you for the effort and the suggestions, Paul. Just recalled that according to systems theory negative feedback may be better than no feedback and even positive feedback...