SharePoint 2013 Global Navigation wrap up

  • Article

In SharePoint 2013 if number of links in the global navigation increases, the links are not wrapped by default. The links are aligned in single line. Sometimes the links are more in number that people started complaining about search bar is not available even though the search bar is available in the right corner of the page. Users never realized the horizontal bar at the bottom of the page. If we scroll to the right corner of the page we can see the search bar. Talking about user experience this looks very weird. 

After some trial CSS tricks appeared to rescue us.
Some of the css classes needs to be modified which will help in wrapping the global navigation in SharePoint 2013. Below are the examples which can be used:-
.ms-core-pageTitle{
    font-size:2em;
}
.ms-core-listMenu-horizontalBox ul, .ms-core-listMenu-horizontalBox li, .ms-core-listMenu-horizontalBox 
.ms-core-listMenu-item, .ms-core-listMenu-horizontalBox > ul > li > table
{
    display :inline !important;
}
.ms-core-listMenu-horizontalBox
{
    display:inline !important;
}
#s4-titlerow{
    height:inherit !important;
}
.ms-breadcrumb-top
{
    white-space:normal !important;
    border-bottom:medium;
    border-bottom-width:1px;
    padding-bottom: 10px;
    font-weight:bold;
}
.ms-core-listMenu-horizontalBox .additional-background.dynamic-children{
    padding-bottom:26px;
    background-position:center;
    display:inline !important;
}
ul.dynamic {
    background-color:#ECEBEB !important;
    display:inline-block !important;
    font-weight:normal;
    padding:3px,10px;
}
li.dynamic .menu-item-text  {
    display:inline-block !important;
    padding-bottom: 10px;
    padding-right:0px;
    background-repeat:no-repeat;
    background-position : bottom,center !important;
    color:black !important;

}

Hope this helps in resolving the issue you are facing.