Dawn 12.0 - parent menu not clickable only in SAFARI (desktop)

Technical Q&A
, ,
1

Hi, I sucessfully customized the code, so the parent menu is clickable (customer goes to main collection) and on hover the submenu is showed. However, the clickable parent menu does not work in Safari web browser - it works in other browsers.

Could you please help me with solving this issue?

The website is: www.shmrnc.cz

The code I use is from this guy: https://www.youtube.com/watch?v=QraXtajEGPs&t=345s (there has been questions about this issue in the comment section but the creator has not replied so far).

Thanks in advance!

2

Hi @Vari41 ,
You can try replacing the href attribute in your tag with the following code:

onclick="setTimeout(function(){window.location.replace('{{ link.url }}')},250);">

If it still doesnā€™t work, try updating your version of Safari.

3

Thank you for quick reply, but i dont know much about coding, so Im not sure where to put your codeā€¦Currently I have modified the code below. Could you please change it as it should be according to your updated code? Thanks so much!

<span {%- if link.child_active %} class=ā€œheader__active-menu-itemā€{% endif %}>{{ link.title | escape }}
{% render ā€˜icon-caretā€™ %}

4 
<a style="color: inherit;{%- unless link.child_active or link.active %}text-decoration:inherit{% endunless %}" onclick="setTimeout(function(){window.location.replace('{{ link.url }}')},250);">
    <span {%- if link.child_active %} class="header__active-menu-item" {% endif %}>{{ link.title | escape }}</span>
    {% render 'icon-caret' %}
</a>

It will look like this after adding my code @Vari41

5

Now the redirection works, however when i hover on the name of the collection (parent menu) the mouse cursor shows an icon that could make the visitors think that the link is not clickable, but in fact it is. It shows the same thing in Safari, Chrome, Edgeā€¦

link here: https://yourimageshare.com/ib/KkRpkKX2JZ

Thank you!

6

Hi @Vari41 ,
This is a mechanism of the theme, a tag without href attribute will not display the pointer
You can edit the previous code and it will look like this:

<a style="color: inherit;{%- unless link.child_active or link.active %}text-decoration:inherit{% endunless %};cursor: pointer;" onclick="setTimeout(function(){window.location.replace('{{ link.url }}')},250);">
    <span {%- if link.child_active %} class="header__active-menu-item" {% endif %}>{{ link.title | escape }}</span>
    {% render 'icon-caret' %}
</a>

I added style cursor: pointer; into the code above

Hope it works @Vari41

2 Likes
7

thank you very much, now it works well!