How to get my header dropdown menu to drop down

Retired Boards Appdev Store Design
,

Topic summary

A user created a custom Shopify header with a hamburger-style dropdown menu that works correctly on mobile but fails to display on desktop. When clicked on desktop, the menu registers the interaction (confirmed by toggling to mobile view showing it as open) but the dropdown options don’t appear visually.

The user shared their section/header.liquid code for troubleshooting. The code snippet appears corrupted or improperly formatted, with reversed/garbled text in several sections (e.g., “}% fidne %{”, “}} tnuoc_meti.trac {{”), making it difficult to diagnose the specific issue.

Key details:

  • Menu functions properly on mobile display
  • Desktop click events are registered but dropdown doesn’t render
  • Issue likely involves CSS display properties or JavaScript event handlers specific to desktop viewport
  • The malformed code suggests potential copy-paste errors or encoding issues

The discussion remains open with no responses or solutions provided yet.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

I made a custom header for my Shopify store that uses the same dropdown menu as on mobile display. It functions without issue on mobile but when I click the hamburger-style dropdown menu or the word “menu” beside it, nothing happens. It’s recognizing being clicked because if I toggle to mobile display the dropdown menu is open. It just isn’t displaying the dropdown options when clicked on desktop.

Below is my code for section/header.liquid please take a look and let me know what needs to be fixed, added, removed, etc to make the dropdown options appear on desktop.


  

    

      

        {% if section.settings.show_announcement or section.settings.header_search_enable %}
          

            {% comment %}
              Add social links to header
            {% endcomment %}

            {% comment %}
            

              {% include 'social-links' %}
            

            {% endcomment %}

            {% if section.settings.show_announcement %}
              
                {% if section.settings.announcement_link != blank %}
                  
                {% endif %}
                  {{ section.settings.header_text | escape }}
                {% if section.settings.announcement_link != blank %}
                  
                {% endif %}
              

            {% elsif section.settings.header_search_enable %}
              
                {% include 'search-bar' with 'header' %}
              

            {% endif %}

          

        {% endif %}

        

          

            
            
          

          {% if section.settings.header_search_enable %}
            {% if section.settings.show_announcement %}
              
                {% include 'search-bar' with 'header' %}
              

            {% endif %}
          {% endif %}

        

      

    

    
      {% if section.settings.show_announcement %}
        {% if section.settings.announcement_link != blank %}
          
        {% endif %}
          {{ section.settings.header_text | escape }}
        {% if section.settings.announcement_link != blank %}
          
        {% endif %}
      {% endif %}
    

    
  
  
    
    {{ 'layout.cart.title' | t }} {{ cart.item_count }}
  

    {% include 'mobile-nav' with linklists[section.settings.nav_menu] %}
  

  

      {% endif %}