Archived topic
Social Media Icons in mobile view
11 replies · Started by Brianna on February 2, 2017
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?
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?
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
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.
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!
I doesn't work. When I hit save, the CSS class bar removes the comma
sorry you actually don't need a comma, just a space.
I can see the classes now.
I think you added the class as social-icon but it needs to be social_icon
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.
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?
AH HA! You did it, it now works, thanks LEO for walking me through it!
You're very welcome!
