Reduce Spacing in a SharePoint 2013 Top Link Bar

 

The top link bar in SharePoint 2013 and Office 365 adds a lot of space between each menu item, 30 pixels to be exact. You can tighten this up quite a bit by changing the default spacing with a block of CSS added to your master page.

Default spacing:

After the CSS change below:

Add the following to your master page somewhere after the CssLink control (<SharePoint:CssLink runat="server" Version="15"/>). Just before the </head> tag works.

<style>
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item 
 { 
   padding-right:4px;
   margin-right:2px; 
   border-right:1px solid;
 }
</style> 

If you just want to adjust the space and not add the lines, then only change the margin:

<style>
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item 
 { 
   margin-right:5px; 
 }
</style> 

 

.