Palo Alto Theme - Mobile Navigation Dropdown Link

[angelicahidalgo]

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! 😊

  {%- 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>

[Rohan_amazg]

I am also looking for the same solution 

[EtienneC]

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 -%}
  <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">
      <button style="margin-left: 3em; font-size:17px;" type="button"  aria-controls="MobileNav--{{ link.handle }}-{{ index }}" data-collapsible-trigger>
      {{- link_title -}}
      <span class="fallback-text">{{ 'layout.navigation.see_more' | t }}</span>
    </button>
    <button type="button" class="mobile-nav__trigger mobile-nav__trigger--level-1" aria-controls="MobileNav--{{ link.handle }}-{{ index }}" 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 }}-{{ index }}" 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: show_links_images, link: sub_link, aspect_ratio: links_images_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 %}>
      <button style="margin-left: 3em;" type="button"  aria-controls="MobileNav--{{ link.handle }}-{{ sub_link.handle }}-{{ index }}" data-collapsible-trigger>
      {{- link_title -}}
      <span class="fallback-text">{{ 'layout.navigation.see_more' | t }}</span>
    </button>

            {%- 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 }}-{{ index }}" 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 }}-{{ index }}" 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 -%}

[Rohan_amazg]

Hey it didnt work 

[Rohan_amazg]

this didnt work