Adding Footer Social Icon To Header - Dawn Theme

Store Design
1

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

hasanali1_0-1679730837403.png
hasanali1_0-1679730837403.png399×166 17.4 KB

hasanali1_1-1679730837511.png

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

password - reucho

thanks in advance!!

example:

hasanali1_2-1679730837397.png
hasanali1_2-1679730837397.png400×113 15.5 KB

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

bloxpixie

2

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 ‘
    ’
  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

Capture.PNG
Capture.PNG854×316 9.4 KB

4 Likes
3

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

4

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

5

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

issue.jpg
issue.jpg2350×256 15.4 KB

6

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;}} "

7

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

1 Like
8

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

9

Hi send me your store url will check

Best regard

10

https://t4gz85ewsmjisw7w-51800866971.shopifypreview.com

Thank You very much!

11

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

best regard

12

Hello,

I am also unable to remove the icon from the header in the mobile layout. Could you help with this?

13

Hey there, I just fixed this on my page. So I added this to my base.css

@media only screen and (max-width: 767px) {
.header__icons .icon-instagram {
display: none;
}
}

in my case I only had an ig as my socials so thats why I put .icon_instagram, which I got the name from the social_icons.liquid file. theres probably a way to just disable all social icons but I couldn’t get it to work but this got rid of it in my header.

14

Check my below post!