Padding breaks layout

Hi paulcobb,

Thanks for using Menu Social Icons!

Menu Social Icons doesn’t set any margin or padding for your icons —?that comes from the CSS of whichever theme you are using. Without looking at your specific site, it’s difficult to give you the exact CSS, but you should be able to find the correct CSS selector quickly using Firebug or Chrome Developer Tools.

For example, in Chrome, right click on one of the icons. Here is a screenshot that shows what happens when I inspect one of the icons in TwentyTwelve: It shows the CSS selector that is used by TwentyTwelve to set margin, and then allows you to try other values to adjust to your taste.

Once you identify the correct selector and margin or padding value that you would like to use, you can add your own custom CSS to override the theme by using a plugin like JetPack, Simple Custom CSS, or Custom CSS Manager.

PS: If you want to change padding on the social icons only, you can use the social-icon class. For example:

li.social-icon { margin: 0; padding: 0; }

or

li.social-icon > a { margin: 0; padding: 0; }

Depending on whether your theme has used margin or padding, and whether it has been set on the LI or the A tag.

Thanks – will try the li.social-icon via css

Hi paulcobb,

It sounded like you knew how to edit CSS, but in case any other users come along wondering how this is done, I have created a walkthrough that covers editing padding, colors, alignment, and size. It can be viewed here: Editing CSS for Menu Social Icons.

Paul

Hi Paul

I love the plugin, but I’m having challenges adjusting the padding, etc. Mostly because I’m a novice with CSS. I’ve read this thread, and others, and watched your video. The CSS plugin you use in the video to edit while in Appearance > Customize, just shows up as a blank white space (left hand side).

I’m using the StudioPress theme, Genesis, if that helps.

I used some of the CSS from this link:
https://sridharkatakam.com/adding-social-icons-navigation-using-menu-social-icons-plugin/

which made changes, but only increased the padding.

My site isn’t live yet, but you can see it here:
https://www.eatmovebe.com/fizzle

Thanks in advance.

Darren

Also, the icons don’t show up on my iPad, but they do on the mobile version for my iPhone.