[Resolved] Social Media Icons in mobile view

[Brianna]

alright, I researched how to get my social media icons to show up in the menu bar when you’re on a mobile phone. I inserted the .php code.

that’s all working fine.

However, I have social media Icons in my menu bar in desktop mode. And when it switches to mobile view the icons remain there but now muddy up the drop down menu. I cannot for the life of me find any forum topic that covers this.

What I want to do: remove the social media icons in the drop down menu bar when I’m on my site in mobile mode. Because they’re already embedded in the menu .php.

I did manage to find a CSS code in direct response to someones question in the forum: But it doesn’t work.

@media screen and (max-width: 770px) {
.social_icon {
display: none;
}
}.

Does that make sense?

[Leo]

Maybe try this?

@media (max-width: 768px) {
    .main-navigation .sf-menu>li.social_icon {
        display: none !important;
    }
}

If this doesn’t work can you provide a link to the site?

[Tom]

The above should work, just make sure your icons have the social_icon class: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

[Brianna]

Ahhhh there’s a hiccup… The CSS class of my social media Icons are already being used: menu-item-float-right

My website is http://www.BVKingsley.com if you need to check it out.

It’s okay if I have to choose between having my social icons on the left side of the desktop screen and having them on the drop down menu on the phone. I was just wonder.

Also, been using GP for a year now. Still in love with the entire thing.

[Leo]

You can add as many CSS classes as you want. Just separate them by a comma 🙂

Let me know if it works out.

Glad you are still loving GP!

[Brianna]

I doesn’t work. When I hit save, the CSS class bar removes the comma

[Leo]

sorry you actually don’t need a comma, just a space.

[Leo]

I can see the classes now.

I think you added the class as social-icon but it needs to be social_icon

[Brianna]

Fixed it to social_icon, still didn’t work.

Lets review in case i got the steps wrong. I put the chunk of code

@media (max-width: 768px) {
.social_icon {
display: none !important;
}
}

into my simple CSS plugin and hit save. I then went appearance > Menu and went to my social media menu items. I added a space next to menu-item-float-right and inserted social_icon. I hit save. I then went to the website on my phone and nothing changed.

I’m probably missing something here.

[Leo]

Ahh looks like we weren’t specific enough as it got overwritten.

I edited the code above (https://generatepress.com/forums/topic/social-media-icons-in-mobile-view/#post-273372).

Can you give it another shot?

[Brianna]

AH HA! You did it, it now works, thanks LEO for walking me through it!

[Leo]

You’re very welcome!

[Author]

Posts