How can I add social icons to the mobile nav in the Debut theme?

[AwesomeDistro]

I am looking to add the social icons on the end of the mobile menu - has anyone achieved this for Debut theme?

eg. 

Mobile Menu Start

HOME
CATALOG

- Social Icons - 

Mobile Menu End

[suyash1]

@AwesomeDistro - it can be achieved via custom coding

[Prezentech]

Hi,

Sure, we have already did that.

Can you please share the size of icons? So, we can create the design for you.

Thanks!

[AwesomeDistro]

Ideally this would populate the same way the footer icons are generated. These will be kept. 4 or 5 icons per row on the mobile menu would be great !

[Prezentech]

Hi @AwesomeDistro ,

Ok, Please share your store url and password (if it is protected) so i can check and give you exact solution here.

Thanks,

[AwesomeDistro]

https://awesome-distro.myshopify.com/

Password: awesome

Debut Theme 

[Prezentech]

Hi @AwesomeDistro 

Thanks for sharing the store URL.

Do you want the same as attached screenshots? if yes, then please add this email address (info@prezentech.com) as staff account so, we can do it for you.

Thanks!

[AwesomeDistro]

If possible the code would pull in the same social-icons line as the footer through the customiser

[Prezentech]

Yes, Please add this email address (info@prezentech.com) as staff account so, I can do it for you.

[AwesomeDistro]

Hello

I have added you thanks!

[Prezentech]

Hi @AwesomeDistro 

I have made the changes on your store so, please check and confirm.

All the links will work from customizer 🙂

Changes which I have made to achieve requirement:

I hope this will work for you.

Thanks!

[Prezentech · Accepted solution]

Hi,

You can add the below code in the mobile menu code in header.liquid:

{%- assign social_icons = false -%}
        {%- if
          settings.social_twitter_link != blank
          or settings.social_facebook_link != blank
          or settings.social_pinterest_link != blank
          or settings.social_instagram_link != blank
          or settings.social_tumblr_link != blank
          or settings.social_snapchat_link != blank
          or settings.social_youtube_link != blank
          or settings.social_vimeo_link != blank
          or settings.social_soundcloud_link != blank
          or settings.social_spotify_link != blank
          or settings.social_applemusic_link != blank
          or settings.social_bandcamp_link != blank
          or settings.social_patreon_link != blank-%}
          {%- assign social_icons = true -%}
        {%- endif -%}

        {%- if social_icons -%}
        	<li class="mobile-nav__item border-top">
              <ul class="social_icons_wrap">
          {%- for social in socials -%}
            {%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
            {%- assign icon_link = social | prepend: 'icon-' | downcase -%}
            {%- if settings[social_link] != blank -%}
            <li class="social-icons_td mobile-nav__item">
              <a class="social-icons__link_td mobile-nav__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
                {%- include icon_link -%}            
              </a>
            </li>
            {%- endif -%}
          {%- endfor -%}
              </ul>
        	</li>

Output:

Thanks,

[Benny97]

Hi, can someone help me why the icons appear on top of each other and not next to each other?

{%- assign socials = "Facebook Instagram Pinterest Tumblr Snapchat Youtube Vimeo Soundcloud" | split: ' '-%}
{%- for social in socials -%}
{%- assign social_link = social | prepend: 'social_' | append: '_link' | downcase -%}
{%- assign icon_link = social | prepend: 'icon-' | downcase -%}
{%- if settings[social_link] != blank -%}
<li class="social-icons_td mobile-nav__item">
<a class="social-icons__link_td mobile-nav__link" href="{{ settings[social_link] | escape }}" aria-describedby="a11y-external-message">
{%- include icon_link -%}
</a>
</li>
{%- endif -%}
{%- endfor -%}