Palo Alto Theme - Mobile Navigation Dropdown Link

Store Design
, , , ,
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