Dawn 5.0 Hide Mobile Social Media Icons In Header

Store Design
1

I added social media icons to the header in the Dawn theme 5.0, and it’s working well. But for mobile, all icons are vertical. For mobile I have the social media inside the menu navigation which is perfect, but I don’t want them to

show for mobile in the header.

https://ez-kaia.myshopify.com

PW: gawldo

Thank you for your help

InkedUntitled design (2)_LI.jpg
InkedUntitled design (2)_LI.jpg500×500 10.9 KB

@LitCommerce

1 Like
2

@San21

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-list-social.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 749px){
ul.header-list-social.list-unstyled.list-social {display: none;}
}
3

Thank you for the quick reply, I cannot see anymore the icons in the menu header which is good, but the icons inside the menu navigation is gone as well, and I would like to have them there. Thanks for your help

1 Like
4

@San21 - just a little tweak, add .header__icons before css so all code becomes

@media only screen and (max-width: 749px){
.header__icons ul.header-list-social.list-unstyled.list-social {display: none;}
}

suyash1_0-1654671750306.png
suyash1_0-1654671750306.png1366×768 114 KB

1 Like
5

@San21

yes, please add social media snippet mobile menu that its

6

thank you, it s working, thanks for your help

1 Like
7

@San21 - welcome, do let us know if you need anything later.

1 Like
8

Hi, I had the same issue and I tried the code but still the social media icons are visible

9

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.

10

@My-Wallets - can yo please share your website link?

11

Thanks for your quick response. I just figured it out myself. It’s fine now :). I have changed the padding from 2rem to 12rem.

It was under:

component-menu-drawer.cs

There under this line:

.menu-drawer__utility-links {

padding: 2rem;

background-color: rgba(var(- -color-foreground), 0.03);

}

12

@My-Wallets - perfect, do let me know if yo need any more updates.

1 Like