Shopify themes, liquid, logos, and UX
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>
I am also looking for the same solution
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 -%}
Hey it didnt work
this didnt work
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024