How to change menu arrows in mobile

[Aleksander22]

Hello,

I was thinking how can I change the menu arrows I’m mobile but has no clue how to do it. Here is example what I wanted 

And I wanted something like that 

 I would be grateful for help

[BSSCommerce-B2B · Accepted solution]

@Aleksander22 ,

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file "header-drawer.liquid" and replace all the code by this one

{% comment %}
  Renders a header drawer menu for mobile and desktop.

  Usage:
  {% render 'header-drawer' %}
{% endcomment %}

<header-drawer data-breakpoint="{% if section.settings.menu_type_desktop == 'drawer' %}desktop{% else %}tablet{% endif %}">
  <details id="Details-menu-drawer-container" class="menu-drawer-container">
    <summary
      class="header__icon header__icon--menu header__icon--summary link focus-inset"
      aria-label="{{ 'sections.header.menu' | t }}"
    >
      <span>
        {{- 'icon-hamburger.svg' | inline_asset_content -}}
        {{- 'icon-close.svg' | inline_asset_content -}}
      </span>
    </summary>
    <div id="menu-drawer" class="gradient menu-drawer motion-reduce color-{{ section.settings.menu_color_scheme }}">
      <div class="menu-drawer__inner-container">
        <div class="menu-drawer__navigation-container">
          <nav class="menu-drawer__navigation">
            <ul class="menu-drawer__menu list-menu" role="list">
              {%- for link in section.settings.menu.links -%}
                <li class="menu-drawer__menu-item list-menu__item link link--text">
                  {%- if link.links != blank -%}
                    <a
                      href="javascript&colon;void(0);"
                      class="dropdown-toggle link link--text list-menu__item"
                      id="HeaderDrawer-{{ link.handle }}"
                    >
                      <span>{{ link.title | escape }}</span>
                      <span class="svg-wrapper">
                        {{- 'icon-caret.svg' | inline_asset_content -}}
                      </span>
                    </a>
                    <ul class="menu-drawer__submenu list-menu" id="submenu-{{ link.handle }}">
                      {%- for childlink in link.links -%}
                        <li class="menu-drawer__menu-item list-menu__item child-dropdown-list">
                          {%- if childlink.links != blank -%}
                            <!-- Child dropdown toggle -->
                            <a
                              href="javascript&colon;void(0);"
                              class="child-dropdown-toggle link link--text list-menu__item"
                              id="HeaderDrawer-{{ link.handle }}-{{ childlink.handle }}"
                            >
                              <span>{{ childlink.title | escape }}</span>
                              <span class="svg-wrapper">
                                {{- 'icon-caret.svg' | inline_asset_content -}}
                              </span>
                            </a>
                            <ul
                              class="menu-drawer__submenu list-menu"
                              id="submenu-{{ link.handle }}-{{ childlink.handle }}"
                            >
                              {%- for grandchildlink in childlink.links -%}
                                <li class="menu-drawer__menu-item list-menu__item grand-child-list">
                                  <a
                                    href="{{ grandchildlink.url }}"
                                    class="menu-drawer__menu-item link link--text list-menu__item"
                                  >
                                    {{ grandchildlink.title | escape }}
                                  </a>
                                </li>
                              {%- endfor -%}
                            </ul>
                          {%- else -%}
                            <a href="{{ childlink.url }}" class="child-dropdown-toggle link link--text list-menu__item">
                              {{ childlink.title | escape }}
                            </a>
                          {%- endif -%}
                        </li>
                      {%- endfor -%}
                    </ul>
                  {%- else -%}
                    <a href="{{ link.url }}" class="dropdown-toggle list-menu__item link link--text">
                      {{ link.title | escape }}
                    </a>
                  {%- endif -%}
                </li>
              {%- endfor -%}
            </ul>
          </nav>
          <div class="menu-drawer__utility-links">
            {%- if shop.customer_accounts_enabled -%}
              <a
                href="{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}"
                class="menu-drawer__account link focus-inset h5 medium-hide large-up-hide"
              >
                {%- if section.settings.enable_customer_avatar -%}
                  <account-icon>
                    {%- if customer and customer.has_avatar? -%}
                      {{ customer | avatar }}
                    {%- else -%}
                      <span class="svg-wrapper">
                        {{- 'icon-account.svg' | inline_asset_content -}}
                      </span>
                    {%- endif -%}
                  </account-icon>
                {%- else -%}
                  <span class="svg-wrapper">
                    {{- 'icon-account.svg' | inline_asset_content -}}
                  </span>
                {%- endif -%}
                {%- liquid
                  if customer
                    echo 'customer.account_fallback' | t
                  else
                    echo 'customer.log_in' | t
                  endif
                -%}
              </a>
            {%- endif -%}
            {%- if localization.available_countries or localization.available_languages -%}
              <div class="menu-drawer__localization header-localization">
                {%- if localization.available_countries and localization.available_countries.size > 1 -%}
                  <localization-form>
                    {%- form 'localization', id: 'HeaderCountryMobileForm', class: 'localization-form' -%}
                      <div>
                        <h2 class="visually-hidden" id="HeaderCountryMobileLabel">
                          {{ 'localization.country_label' | t }}
                        </h2>
                        {%- render 'country-localization', localPosition: 'HeaderCountryMobile' -%}
                      </div>
                    {%- endform -%}
                  </localization-form>
                {% endif %}

                {%- if localization.available_languages and localization.available_languages.size > 1 -%}
                  <localization-form>
                    {%- form 'localization', id: 'HeaderLanguageMobileForm', class: 'localization-form' -%}
                      <div>
                        <h2 class="visually-hidden" id="HeaderLanguageMobileLabel">
                          {{ 'localization.language_label' | t }}
                        </h2>
                        {%- render 'language-localization', localPosition: 'HeaderLanguageMobile' -%}
                      </div>
                    {%- endform -%}
                  </localization-form>
                {%- endif -%}
              </div>
            {%- endif -%}
            <ul class="list list-social list-unstyled" role="list">
              {%- if settings.social_twitter_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_twitter_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-twitter.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_facebook_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_facebook_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-facebook.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_pinterest_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_pinterest_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-pinterest.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_instagram_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_instagram_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-instagram.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_tiktok_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_tiktok_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-tiktok.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_tumblr_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_tumblr_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-tumblr.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_snapchat_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_snapchat_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-snapchat.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_youtube_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_youtube_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-youtube.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
              {%- if settings.social_vimeo_link != blank -%}
                <li class="list-social__item">
                  <a href="{{ settings.social_vimeo_link }}" class="list-social__link link">
                    <span class="svg-wrapper">
                      {{- 'icon-vimeo.svg' | inline_asset_content -}}
                    </span>
                    <span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
                  </a>
                </li>
              {%- endif -%}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </details>
</header-drawer>

Step 3:  Find the file "component-menu-drawer.css" and add this code to the end of the file

/* Custom dropdown navigation */
.dropdown-toggle {
  font-weight: bold;
}
.menu-drawer__submenu {
  display: none;
  padding-left: 15px !important;
}
.menu-drawer__submenu.active {
  display: block;
  position: unset;
  visibility: visible;
  transform: none;
  width: unset;
  background: transparent !important;
}
.dropdown-toggle,
.child-dropdown-toggle {
  cursor: pointer;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 0;
}
.menu-drawer__menu-item,
.menu-drawer__menu-item:hover {
  flex-direction: column;
  align-items: start;
  background: transparent !important;
  padding: 0;
}
.js .menu-drawer__menu-item .icon-caret {
  display: block;
}
.js .menu-drawer__submenu {
  width: 100% !important;
}
.menu-drawer__menu {
  padding: 1.6rem !important;
}
.menu-drawer__menu * {
  font-size: 1.6rem;
}
.menu-drawer__menu .svg-wrapper {
  width: 1.3rem;
  height: 1.3rem;
}
.grand-child-list {
  padding: 1rem 0 !important;
}

Step 4: Find the file "theme.liquid" and add this code before </body> tag

<script>
     document.addEventListener("DOMContentLoaded", (event) => {
        document.querySelectorAll('.dropdown-toggle').forEach(function(toggle) {
          toggle.addEventListener('click', function() {
            var submenu = document.getElementById('submenu-' + this.id.replace('HeaderDrawer-', ''));
            submenu.classList.toggle('active');
          });
        });

        document.querySelectorAll('.child-dropdown-toggle').forEach(function(toggle) {
          toggle.addEventListener('click', function() {
            var submenu = document.getElementById('submenu-' + this.id.replace('HeaderDrawer-', ''));
            submenu.classList.toggle('active');
          });
        });
      });
    </script>

Result:

Hope it helps 😍