Removing Social Media Icons in Mobile View

Store Design
,
1

Hi there!

I added social media icons in the header for the desktop version. However, I do not want these social media icons to show in the mobile version & only in the hamburger drop down menu at the bottom like how it is now:

Screen Shot 2022-11-07 at 12.37.43 PM.png
Screen Shot 2022-11-07 at 12.37.43 PM.png748×790 513 KB

Wondering if there is a code available to do this?

Site is: r3di-shop.com

Thanks so much in advance. :slightly_smiling_face:

2

Hi @create_onvirtu !

This is Richard Nguyen from PageFly - Advanced Page Builder. I would love to give you some recommendation

Please paste this code at the bottom of component-list-social.css under assets in theme code files;

@media screen and (max-width: 768px) {
.list-social__link {
display: none !important;
}
}

Like this;

Screenshot_33.png
Screenshot_33.png1349×864 96.9 KB

I hope my recommendations will be beneficial for you, let me know if you have any questions. Cheers!

Best Regards;
Richard - PageFly

3

Hi Richard, thank you so much for the fast response!

The code did work in taking off the social media icons from the header but it removed the icons from the hamburger menu. Is there another code to keep it on there?

For example:

Screen Shot 2022-11-07 at 2.02.41 PM.png
Screen Shot 2022-11-07 at 2.02.41 PM.png588×880 9.05 KB

After code:

IMG_5486.PNG
IMG_5486.PNG1284×2778 138 KB

4

Never mind, I solved it!

5

Hi @create_onvirtu !

Please paste this code at the bottom of component-list-social.css under assets in theme code files;

@media screen and (max-width: 767px){
.header-list-socail{
   display: none !important;
 }
}

I hope my recommendations will be beneficial for you, let me know if you have any questions. Cheers!

Best Regards;
Richard - PageFly