How do I reorder the social media icons in the mobile menu (Dawn theme)

[earthtoplanet]

I was able to reorder the social media icons in the footer of the site with no problems by editing the Sections/footer.liquid (ul class="footer__list-social list-unstyled list-social" role="list")

However, I'm struggling to find the controls to do the same in the mobile hamburger menu. I'd like to rearrange the icons so that it's: Instagram, Facebook, Twitter:

Thanks for your help!

[earthtoplanet · Accepted solution]

Figured this out for myself. Just needed to find the list in Sections/header.liquid

It's under <div class="menu-drawer__utility-links">

For example, I ordered so that it goes Instagram, Twitter, Facebook:

 <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">
                      {% render 'icon-account' %}
                      {%- liquid
                        if customer
                          echo 'customer.account_fallback' | t
                        else
                          echo 'customer.log_in' | t
                        endif
                      -%}
                    </a>
                  {%- endif -%}
                  <ul class="list list-social list-unstyled" role="list">
                    
                    {%- endif -%}
                    {%- if settings.social_instagram_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_instagram_link }}" class="list-social__link link">
                          {%- render 'icon-instagram' -%}
                          <span class="visually-hidden">{{ 'general.social.links.instagram' | 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">
                          {%- render 'icon-facebook' -%}
                          <span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
                        </a>
                      </li>
                    
                    {%- if settings.social_twitter_link != blank -%}
                      <li class="list-social__item">
                        <a href="{{ settings.social_twitter_link }}" class="list-social__link link">
                          {%- render 'icon-twitter' -%}
                          <span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
                        </a>
                      </li>

[My-Wallets]

Hello,

any idea how to move these social media icons a little bit to the right of the mobile menu?

I have a chat bubble App that covers these icons behind it. So i have to reposition them.

[btf85]

Omg thank you this was driving me crazy. I added a LinkedIn icon to our store's footer but couldn't figure out how to make it appear in the mobile drawer. Makes sense that it would appear in the header file. Cheers!

[glucinth]

Hello, may I know how you did it in the footer?