Todorovic Dragan

This is a quick post to show the code snippet I used to wrap the global navigation items in SharePoint 2013. You can also use custom CSS code in order to get some space between navigation lines and items. First, open default masterpage of your site collection and find the following:

<SharePoint:AspMenu
   ID="TopNavigationMenu"
   Runat="server"
   EnableViewState="false"
   DataSourceID="topSiteMap"
   AccessKey="<%$Resources:wss,navigation_accesskey%>"
   UseSimpleRendering="true"
   UseSeparateCss="false"
   Orientation="Horizontal"
   StaticDisplayLevels="2"
   AdjustForShowStartingNode="true"
   MaximumDynamicDisplayLevels="2"
   SkipLinkText="" />

and replace with the code below:

<SharePoint:AspMenu
   ID="TopNavigationMenu"
   Runat="server"
   EnableViewState="false"
   DataSourceID="topSiteMap"
   AccessKey="<%$Resources:wss,navigation_accesskey%>"
   UseSimpleRendering="false"
   UseSeparateCss="false"
   Orientation="Horizontal"
   StaticDisplayLevels="2"
   AdjustForShowStartingNode="true"
   MaximumDynamicDisplayLevels="2"
   SkipLinkText=""
   ItemWrap="true"
   RenderingMode="List" 
   cssClass="mycss"/>

As you can see, the only diference is:

ItemWrap="true"
RenderingMode="List"
cssClass="mycss"

Create custom CSS file with the following content:

.mycss .level1
{
margin-left: 10px;
margin-right: 20px;
}
.mycss .level2
{
margin-left: 10px;
margin-right: 20px;
}
.mycss .level3
{
margin-left: 10px;
margin-right: 20px;
}