Solved

Removing Social Media Icons in Mobile View

create_onvirtu
Shopify Partner
12 0 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

Wondering if there is a code available to do this? 

 

Site is: r3di-shop.com 

Thanks so much in advance. 🙂 

Accepted Solution (1)
PageFly-Richard
Shopify Partner
4287 973 1627

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 4 (4)

PageFly-Richard
Shopify Partner
4287 973 1627

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

 

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

 

Best Regards;
Richard - PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

create_onvirtu
Shopify Partner
12 0 1

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

 

After code: 

IMG_5486.PNG

create_onvirtu
Shopify Partner
12 0 1

Never mind, I solved it! 

PageFly-Richard
Shopify Partner
4287 973 1627

This is an accepted solution.

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.