-


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

Comments

Post a Comment

Popular posts from this blog

Read all lists/views/fields using pnpjs in spfx webpart

-
Image
Recently I started exploring pnp js with spfx webparts. I wanted to explore few things which are more of basic functionality for any webparts. In this Post I'll explain How to read all the lists from a site and bind to dropdown in spfx webpart Read all the views for a selected list and bind to 2nd dropdown. Get all the fields/columns for a selected view and render then as checkboxes in spfx webpart. I have created a react spfx project and imported all the sp,web from @pnp/sp library. i mport { sp , Web , List } from '@pnp/sp' ; First step is to declare 3 collections for above 3 requirements so that you can use them in getPropertyPageConfiguration() method. private listDropDownOptions : IPropertyPaneDropdownOption []; private viewDropDownOptions : IPropertyPaneDropdownOption []; private fieldsListCollection = [];   Use these collections in getPropertyPageConfiguration() method. protected getPropertyPaneConfiguration (): IPropertyPaneConfigura
Read more

Deploy artifacts with spfx webparts

-
Image
SharePoint framework (commonly known as spfx ) webparts can be used to deploy the artifacts like js/css/image files etc. There are multiple options to host your artifacts.  First option is to host to CDN (like azure) Other option is to include that within the package and then deploy to appcatalog along with sppkg file. Host to CDN In order to host the webparts to Azure or any CDN,  open copy-assets.json file in config folder of your spfx webpart and update the CDN path. This CDN path can be any SharePoint library or Azure CDN. Basically any path which is accessible using http protocol. If you are publishing to Azure CDN please make sure to add the azure credentials in deploy-azure-storage.json file. Deploy to AppCatalog In case you want to deploy the artifacts to app catalog, package-solution.json file under config folder and make sure that includeClientSideAssets is set to true . Once this is set when you will deploy the webpart to the webpart gallary. 
Read more