Solved

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

earthtoplanet
Explorer
46 6 8

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:

earthtoplanet_0-1637009102234.png

Thanks for your help!

 

 

Accepted Solution (1)

earthtoplanet
Explorer
46 6 8

This is an 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>

 

View solution in original post

Replies 4 (4)

earthtoplanet
Explorer
46 6 8

This is an 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
Tourist
4 0 0

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
Visitor
2 0 1

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
Explorer
61 1 11

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