Archived topic
Reducing space between social icons in menu?
3 replies · Started by Jacks McNamara on July 10, 2017
Hello - I used the font-awesome method to install icons in my menu. (Each icon is added as an individual menu item with an image tag.) Is there a way to reduce the padding between those social icons, while leaving the rest of the menu items in the normal spacing? I just want the social icons to appear like a little block together. Can I target them individually somehow in the css and convince them to be closer together?
The site I'm working on is http://77.104.138.137/~cookwit3/
Currently under construction, I'll take the maintenance mode off for a little bit in case you have time to take a peek.
Hi there,
Try giving the icons a custom class in the menu: icon-padding
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Then use this CSS to target:
.main-navigation .main-nav ul li.icon-padding a {
padding-left: 10px;
padding-right: 10px;
}Let me know.
That worked perfectly, thank you so much!
No problem!
