How can I remove the social icon from a mobile dropdown menu?

Store Design

Topic summary

A user wants to remove social media icons from the mobile dropdown menu while keeping them on the desktop version. The theme in use is Impulse.

Solutions Provided:
Multiple respondents offered CSS code snippets to hide the icons on mobile devices. The recommended approach involves:

  • Navigating to Online Store → Theme → Edit code
  • Locating the theme.css file
  • Adding CSS media queries targeting mobile screens (max-width: 767px or 425px)
  • Using display: none !important on the .mobile-nav__social class

Resolution:
The original poster confirmed one solution worked successfully.

Follow-up Issue:
A new user with the Flora theme cannot locate the theme.css file and seeks guidance for the same modification. This question remains unanswered.

Summarized with AI on October 24. AI used: claude-sonnet-4-5-20250929.
1

Good afternoon

Short story long, I want to remove the social icon from the dropdown menu on mobile.

Removing the social on the dashboard will remove the icon only on the laptop version.

How could I do this?

Thank you

Yohan

Theme: impulse

Website: yohandeschamps.net

IMG_4D6C7EF58B38-1.jpeg
IMG_4D6C7EF58B38-1.jpeg1170×2532 94.6 KB

2

Hi [email removed]YOYO74,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

@media(max-width:767px){
ul.mobile-nav__social.appear-animation.appear-delay-6{display:none !important}
}

PageFlyVictor_0-1681370910234.png
PageFlyVictor_0-1681370910234.png720×1564 18.1 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

3

@YOYO74
add below css into theme.css file

@media (max-width:425px)
{
ul.mobile-nav__social.appear-animation.appear-delay-6 {
    display: none;
}
}

Ujjaval_0-1681370913693.png
Ujjaval_0-1681370913693.png348×631 3.51 KB

remove social media icon from mobile drop-down menu

4

Hello @YOYO74

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

@media only screen and (max-width: 768px) {
.mobile-nav__social {
    display: none !important;
}
}
@media only screen and (min-width: 992px) {
.mobile-nav__social {
    display: none !important;
}
}
5

Thank you @PageFly-Victor

1 Like
6

You are welcome. I’m glad when I can help you :heart_eyes:

7

Hi, I can’t find theme.css. I am using Flora theme and would also like to remove the social icons on the drop down menu. Do you know how I could achieve this?