Social Media Icons styling

link: demo1.builtonmission.com/demo

Best to add them to the menu itself: https://docs.generatepress.com/article/adding-icons-to-menu-items/

To make them inline, add this class to them: https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right

Bro you are awesome! I got that working too! Thank you last trick how would i reduce the space between them....they are spread out pretty far.

Thanks you so much!!!

Hi Jason,

Try this CSS:

.menu-item-float-right a {
    padding-right: 5px !important;
}

Let me know if this works.

That worked but had to set it to 0 and still a bit too much space. Any idea? Trying to match the look with the "follow me" footer widget.

:)

If there isn't a fix i get it. I'm stretching the limits on this template without an actual official widget slide out. Its not translating via mobile either. Show it vertical for some reason.

The space is coming from the left padding which you would want for the first/facebook icon.

Try adding another class, menu-item-no-padding, after the menu-item-float-right class to the next three icons.
Then add this CSS:

.menu-item-no-padding a {
    padding-left: 0 !important;
}

Let me know if this works.

Try this to make them inline on mobile:

#generate-slideout-menu li.menu-item-float-right {
    display: inline-block !important;
}

Let me know.

Yes that worked but not the spacing. The added code for spacing messed it all up. :(

Did you remove the code? Can you added it back in so I can see what's wrong?

Make sure the two classes are separated by a space in the custom CSS field for the menu items.

Yes I can. How do I add another class in there though. Separated by a comma or just add it in after the first one?

Separated by a space.

all set but I noticed this time nothing changed.

Hmm I don't see the classes being added.

The CSS classes field in the menu for the 3 icons should be: menu-item-float-right menu-item-no-padding

Can you make sure it's added correctly?