Monday, July 27, 2015


Wrapping Global Navigation in SharePoint 2013


In SharePoint 2013 if number of links in the global navigation increases, the links are not wrapped by default. The links were 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. 

In order to fix this issue some of the css classes needs to be updated which will help in wrapping the global navigation in SharePoint 2013. Below are the some of the css classes:-

.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.

Happy SharePointing......

No comments:

Post a Comment