Copy-paste a Liquid snippet for headers & navigation - Slide-in menu with collections and a support footer - the navigation every mobile shopper expects.
1<gpl-mnav class="gpl-mnav">2 <button type="button" class="gpl-mnav__open" data-open aria-label="Menu">3 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/></svg>4 </button>5 <div class="gpl-mnav__backdrop" hidden data-backdrop></div>6 <nav class="gpl-mnav__drawer" hidden data-drawer aria-label="Mobile menu">7 <button type="button" class="gpl-mnav__close" data-close aria-label="Close">×</button>8 {%- assign rows = links | newline_to_br | split: '<br />' -%}9 {%- for row in rows -%}10 {%- assign parts = row | strip | split: '|' -%}11 <a class="gpl-mnav__link" href="{{ parts[1] | strip | default: '#' }}">{{ parts[0] | strip }}</a>12 {%- endfor -%}13 {%- if phone != blank -%}14 <div class="gpl-mnav__foot">
Full source is for members
One payment - every snippet, guide and bundle
