Adding Footer Social Icon To Header - Dawn Theme

[hasanali1]

is it possible to add the social media icons in footer to the header ( want them BOTH in footer and header)

website - https://the-style-luxe.myshopify.com/

password - reucho

thanks in advance!!

example:

https://vibes-theme.myshopify.com/

bloxpixie

[Jasoliya · Accepted solution]

Hi @hasanali1 

This is quite custom work but you can follow this for fast solution may be it will help in some case.

follow this

1. Go to Online Store > Themes.
2. Click on the Actions button next to the Dawn theme, and select Edit code from the dropdown menu.
3. open section->header.liquid file and fine for "header__icons" class.
4. add this snippet "{%- render 'social-icons' -%}" to next line of '<div class="header__icons">' 
5. hide it from mobile because in mobile it will not fit, add this code in css file  "@media only screen and (max-width: 767px) { .header .footer__list-social{display: none;}} "
6. it should look  like image attached 
7. save it

[hasanali1]

hi, this worked but its not very responsive when i try to compress the site, the icons collapse on each other

[Jasoliya]

That i told you we need to perfect fit in html and css too, send me url and password will check as possible 

[Hausmeisterle]

Hi,

The Code works perfect , only a little problem as you see in the picture.
any Idea how to solve this ?
Can i move the in this Case TikTok icon to the other´s

Regards

[Stridy]

May I ask you which CSS files exactly I should modify on :

hide it from mobile because in mobile it will not fit, add this code in css file  "@media only screen and (max-width: 767px) { .header .footer__list-social{display: none;}} "

[Jasoliya]

You can add in any css file like theme.css, style.csss or base.css

[NachoBCN12]

Hi! I'm trying to hide it in mobiles but adding the code to base.css and nothing happens.

What can I do?

Thank you very much

[Jasoliya]

Hi send me your store url will check

Best regard 

[NachoBCN12]

https://t4gz85ewsmjisw7w-51800866971.shopifypreview.com

Thank You very much!

[Jasoliya]

Which part do you want to hide? let me know so i can give you code

best regard