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]

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 -%}
        	- {%- 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 -%}
              - {%- include icon_link -%}            
              
            
              {%- endif -%}
            {%- endfor -%}
              
        	

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 -%}

{%- include icon_link -%}

{%- endif -%} {%- endfor -%}