Menu item spacing

[ENBertussi]

Hey folks,

sorry but i can’t seem to find a quick way to change menu item spacing in pro theme… any help would be appreciated. site we’re working on is https://thephysician.coach/ and i just need less space between items after having added social media icons to the menu.

ENB…//

[ruenel]

Hello Erich,

Thanks for writing in! Did you insert the icons manually with a custom HTML code? if that is the case, you will have to manually add some left margin of the first icon so that it moves away to the right. Thus, the text menu items and the icon menu items will have space between them.

Your Facebook icon code may be like this: <i style="margin-left: 30px;" class="x-icon-facebook" data-x-icon-b="&#xf39e;" aria-hidden="true"></i>

The code was taken from your site and the CSS is from the help article.

Hope this helps. Kindly let us know how it goes.

[ENBertussi]

Hey @ruenel,

yes we did insert the icons using the menu html in the name field as per previous forum posts. since we are using custom headers.

i will try the code for the icons in the menu space.

what about regular menu items? how do i get the home-about-mission-programs-testimonials-contact to be a tiny bit closer too?

thanks so much for your help with this.

ENB…//

[ENBertussi]

Hey @ruenel,
when i added the style margin-left to other menu icons it seemed to not work as expected it oddly started adding space it also seems to be affecting all items in the menu and not alone the specific icon…

these are all four ‘navigation labels’ i have used in the core wordpress menu system to add the icons. NOTE the margin code in the facebook menu item only.

[ruenel]

Hello Erich,

In general, the spacing between the menu items in the navigation inline element can be adjusted by increasing or decreasing the padding and the text margin of the top links. Click the navigation inline element and go to Menu > Top Links.

If you want a particular menu item like the custom Facebook icon to have different spacing, you apply the inline CSS which I have suggested in my previous reply. If ever that does not work, you may a custom CSS selector to the particular custom menu item so that you can use a custom CSS. Please check out this tutorial:

• https://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

Hope this helps.