Dropdown menu isnt working on mobile dawn

Deutsch Diskussion Technische Fragen & Antworten
1

Hello,

currently the dropdown menu in the Dawn theme no longer works on the mobile version. Also, when you click on the magnifying glass to search, the whole screen is locked with the colours of our company colour scheme that we had set and you can no longer close the search as usual via the X.

I have now edited the code, but it does not work and neither does the original one.

header-dropdown-menu

{% comment %}
Renders a standard dropdown style menu for the header.

Usage:
{% render ‘header-dropdown-menu’ %}
{% endcomment %}

    {%- for link in section.settings.menu.links -%}
  • {%- if link.links != blank -%}
    {{- link.title | escape -}} {% render 'icon-caret' %}

    {%- else -%}
    <a
    id=“HeaderMenu-{{ link.handle }}”
    href=“{{ link.url }}”
    class=“header__menu-item list-menu__item link link–text focus-inset”
    {% if link.current %}
    aria-current=“page”
    {% endif %}

    <span
    {%- if link.current %}
    class=“header__active-menu-item”
    {% endif %}

    {{- link.title | escape -}}


    {%- endif -%}

    • {%- endfor -%}
2

Hey @Sfgermany

You have reached the German community here but we can chat in English too, that’s no problem!

23-04-mjtb2-y5i84.png
23-04-mjtb2-y5i84.png1182×156 23.9 KB

It’s difficult to say but the issues you’re encountering with the dropdown menu and search functionality in the Shopify Dawn theme seem to be related to JavaScript and CSS. Here are some are general tips you can try to resolve these issues:

JavaScript Conflicts: The dropdown menu not working on mobile could be due to JavaScript conflicts. Since you’ve edited the code, it’s possible that the JavaScript responsible for the dropdown functionality is not executing correctly.

  • Check for any JavaScript errors in the browser’s console (you can access this in most browsers by right-clicking on the page, selecting “Inspect”, and then going to the “Console” tab).
  • Ensure that the script tag in your provided code snippet is correctly executing. It’s responsible for toggling the open state of the details element. If this script is not running correctly, the dropdown won’t function.

CSS Issues: The problem with the search function (where the screen locks with the company’s color scheme) suggests a CSS issue.

  • Inspect the element (using the browser’s inspect tool) to see which CSS rules are being applied when the search is activated. You might find that a modal or overlay is being displayed with a higher z-index, preventing interaction with other elements.
  • Check if the CSS rules for your color scheme are being applied too broadly, affecting elements they shouldn’t.

Reverting to Original Code: Since you mentioned that editing the code did not resolve the issue and neither did the original code, it’s possible that there are other conflicting scripts or stylesheets.

  • Temporarily disable any recent additions or changes to other parts of your theme to see if there’s an interaction causing the issue.
  • If you have added any new apps or plugins recently, consider whether these could be causing a conflict.

Testing in Different Environments: Sometimes, issues like these can be browser-specific.

  • Test your website on different browsers and devices to see if the issue persists. This can help narrow down whether it’s a global issue or specific to certain environments.

Shopify Support and Community Forums: If you’re unable to resolve the issue yourself, as it’s the Dawn Theme consider reaching out to Shopify support.

Professional Help: If the issue is critical and you’re not comfortable with web development, it might be worth getting help from a professional Shopify developer.

Remember, when making changes to your theme, it’s always a good idea to create a backup so you can revert to a previous state if something goes wrong.