Palo Alto Theme - Mobile Navigation Dropdown Link

Store Design
, , , ,

Topic summary

Issue: Users want to modify the Palo Alto theme’s mobile navigation so the entire menu item area triggers dropdowns, not just the small + button. Currently, the button and menu link are separate HTML elements, making it harder for users to access submenus.

Code Context: The original poster shared HTML/Liquid code from the mobile navigation template showing the separated structure—a link element for the menu item and a separate button element for the dropdown trigger.

Proposed Solution: One user (EtienneC) offered a “quick fix” involving modifications to the nav-item-mobile.liquid file with code snippets, though the shared code appears partially corrupted or improperly formatted.

Current Status: The solution was tested but reportedly did not work for at least one other user seeking the same functionality. The discussion remains unresolved with no confirmed working solution.

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

Hi everyone!

I am trying to change the Palo Alto mobile navigation so that you can click the entire area and it triggers the dropdown.

At the moment the + button is separate to the menu item. I’m wanting to make it easier for users to click on the drop down and not have to click right on the + button.

I’ve been looking at the HTML and I see that the button link is separate to the menu item link. I just don’t want to break anything and I have no idea how to move it.

Thank you in advance! :blush:

  {%- comment -%} Mobile Navigation {%- endcomment -%}
  <ul class="mobile-nav mobile-nav--weight-{{ settings.nav_font_weight }}{% unless settings.nav_caps_letter_spacing %} letter-spacing-nav{% endunless %}">
    {%- for link in linklists[section.settings.main-menu].links -%}
      {%- assign link_title = link.title | strip_html | escape -%}
      {%- assign link_title_lowercase = link.title | downcase | strip_html | escape -%}
      {%- if link.links != blank -%}
        <li class="mobile-menu__item mobile-menu__item--level-1 mobile-menu__item--has-items{% if link.active %} mobile-menu__item--active{% endif %}" aria-haspopup="true">
          <a href="{{ link.url }}" class="mobile-navlink mobile-navlink--level-1{% if mobile_menu_behaviour == 'trigger' %} mobile-navlink--trigger{% endif %}{% if highlight_item == link_title_lowercase %} mobile-navlink--highlight{% endif %}" data-nav-link-mobile>
            {{- link_title -}}
          </a>
          <button type="button" class="mobile-nav__trigger mobile-nav__trigger--level-1" aria-controls="MobileNav--{{ link.handle }}-{{ forloop.index0 }}" data-collapsible-trigger>
            {%- render 'icon-toggle-plus' -%}
            {%- render 'icon-toggle-minus' -%}
            <span class="fallback-text">{{ 'layout.navigation.see_more' | t }}</span>
          </button>
          <div class="mobile-dropdown" id="MobileNav--{{ link.handle }}-{{ forloop.index0 }}" data-collapsible-container>
            <ul class="mobile-nav__sublist{% if sub_link.levels == 1 %} mobile-nav__sublist--has-items{% endif %}" data-collapsible-content>
              {%- for sub_link in link.links -%}
                {%- assign link_title = sub_link.title | strip_html | escape -%}
                {%- assign link_title_lowercase = sub_link.title | downcase | strip_html | escape -%}

                {%- capture link_image_markup -%}
                  {%- render 'header-link-image' with enable: section.settings.show_images, link: sub_link, aspect_ratio: section.settings.image_aspect_ratio -%}
                {%- endcapture -%}

                <li class="mobile-menu__item mobile-menu__item--level-2{% if sub_link.levels == 1 %} mobile-menu__item--has-items{% endif %}{% if sub_link.active %} mobile-menu__item--active{% endif %}" {% if sub_link.levels == 1 %}aria-haspopup="true"{% endif %}>
                  <a href="{{ sub_link.url }}" class="mobile-navlink mobile-navlink--level-2{% if link_image_markup != blank %} mobile-navlink--image{% endif %}{% if sub_link.levels == 1 and mobile_menu_behaviour == 'trigger' %} mobile-navlink--trigger{% endif %}{% if highlight_item == link_title_lowercase %} mobile-navlink--highlight{% endif %}" data-nav-link-mobile>
                    {%- if link_image_markup != blank -%}
                      <div class="mobile-navlink__image">
                        {{- link_image_markup -}}
                      </div>
                    {%- endif -%}

                    <span>{{- link_title -}}</span>
                  </a>

                  {%- if sub_link.levels == 1 -%}
                    <button type="button" class="mobile-nav__trigger mobile-nav__trigger--level-2" aria-controls="MobileNav--{{ link.handle }}-{{ sub_link.handle }}-{{ forloop.index0 }}" data-collapsible-trigger>
                      {%- render 'icon-toggle-plus' -%}
                      {%- render 'icon-toggle-minus' -%}
                      <span class="fallback-text">{{ 'layout.navigation.see_more' | t }}</span>
                    </button>
                  {%- endif -%}

                  {%- if sub_link.levels == 1 -%}
                    <div class="mobile-dropdown" id="MobileNav--{{ link.handle }}-{{ sub_link.handle }}-{{ forloop.index0 }}" data-collapsible-container>
                      <ul class="mobile-nav__sub-sublist" data-collapsible-content>
                        {%- for sub_sub_link in sub_link.links -%}
                          {%- assign link_title = sub_sub_link.title | strip_html | escape -%}
                          {%- assign link_title_lowercase = sub_sub_link.title | downcase | strip_html | escape -%}
                          <li class="mobile-menu__item mobile-menu__item--level-3{% if sub_sub_link.active %} mobile-menu__item--active{% endif %}">
                            <a href="{{ sub_sub_link.url }}" class="mobile-navlink mobile-navlink--level-3{% if highlight_item == link_title_lowercase %} mobile-navlink--highlight{% endif %}">
                              {{- link_title -}}
                            </a>
                          </li>
                        {%- endfor -%}
                      </ul>
                    </div>
                  {%- endif -%}
                </li>
              {%- endfor -%}
            </ul>
          </div>
        </li>
      {%- else -%}
        <li class="mobile-menu__item mobile-menu__item--level-1{% if link.active %} mobile-menu__item--active{% endif %}">
          <a href="{{ link.url }}" class="mobile-navlink mobile-navlink--level-1{% if highlight_item == link_title_lowercase %} mobile-navlink--highlight{% endif %}">
            {{ link_title }}
          </a>
        </li>
      {%- endif -%}
    {%- endfor -%}
  </ul>
2

I am also looking for the same solution

3

Hello dear Angelica,

Maybe you found a solution since then but here is a quick fix :

  • Go to nav-item-mobile.liquid

  • Copy paste this code :

{%- assign link_title = link.title | strip_html | escape -%}
{%- assign link_title_lowercase = link.title | downcase | strip_html | escape -%}
{%- if link.links != blank -%}
  - {%- for sub_link in link.links -%}
            {%- assign link_title = sub_link.title | strip_html | escape -%}
            {%- assign link_title_lowercase = sub_link.title | downcase | strip_html | escape -%}

            {%- capture link_image_markup -%}
              {%- render 'header-link-image' with enable: show_links_images, link: sub_link, aspect_ratio: links_images_aspect_ratio -%}
            {%- endcapture -%}

            - {%- if sub_link.levels == 1 -%}
              
                {%- endif -%}

                {%- if sub_link.levels == 1 -%}
              

                

                      {%- for sub_sub_link in sub_link.links -%}
                        {%- assign link_title = sub_sub_link.title | strip_html | escape -%}
                        {%- assign link_title_lowercase = sub_sub_link.title | downcase | strip_html | escape -%}
                        - {{- link_title -}}
                      
                    
                      {%- endfor -%}
                
              

                {%- endif -%}
          
          {%- endfor -%}
      
    

  

{%- else -%}
  - {{ link_title }}
    
  

{%- endif -%}
4

Hey it didnt work

5

this didnt work