[Resolved] Reducing space between social icons in menu?

[Jacks McNamara]

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.

[Leo]

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.

[Jacks McNamara]

That worked perfectly, thank you so much!

[Leo]

No problem!

[Author]

Posts