Viewing 3 replies - 1 through 3 (of 3 total)
  • Hey!

    The easiest way I can think of is to add custom CSS classes to menu items that only show icons. When editing the menu in Appearance > Menus:

    1. Click on the Screen Options tab on the upper right of the page
    2. Tick the CSS Classes checkbox
    3. Click on the Screen Options tab again to close the dropdown
    4. Edit each menu items that should only show icons
    5. Enter icon-only in the CSS Classes (optional) field
    6. Then, in your CSS file, use that class to change the padding
    .menu .icon-only a { padding: 20px 5px}
    Thread Starter partialtopink

    (@partialtopink)

    Thank you! Which CSS file do I enter the above code?

    Thread Starter partialtopink

    (@partialtopink)

    Nevermind — able to troubleshoot myself. Added it to the overall site’s CSS. Worked perfectly! Thanks, Dzikri!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘decreasing padding between icons’ is closed to new replies.