Friday, November 21, 2014

Branding SharePoint 2013 Top Navigation Menu bar with Custom CSS

Branding SharePoint top navigation is one of the frequent requirement in SharePoint implementations. Here is my quick way to apply branding to SharePoint 2013 top navigation menu. 

Step 1: Create a custom CSS file with custom styles for your navigation menu (Find my CSS below!). Upload it either to site assets library/Master pages folder or to file system (/_Layouts/Styles/).

Step 2: Edit the HTML master page and add reference to your custom CSS.
Open the HTML master page of your site in SharePoint designer (by default: Seattle.html), Locate this chunk:

 <!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->
Add this line just below it:
<!--SPM:<SharePoint:CssRegistration Name="http://YOUR-SITE-COLLECTION-URL/SiteAssets/YOUR-CSS-FILE.css" runat="server" After="corev15.css" />-->
Rather hard-coding the URL, upload/deploy custom CSS to Master Pages folder and set the path as:
<!--SPM:<SharePoint:CssRegistration name="&lt;% $SPUrl:~site/_catalogs/masterpage/YOURFOLDER/YOUR-style-Sheet.css %&gt;" runat="server" after="SharepointCssFile" />-->

Custom CSS to Branding SharePoint 2013 Top Navigation Menu:
and my Custom CSS goes here:
 /*** Top Navigaion Menu Items container DIV ***/
.ms-core-listMenu-horizontalBox {
    background-color: #47A4D3;
}  
 
 /*** Top Navigaion Static Menu Items ***/ 
.ms-core-listMenu-horizontalBox li.static {
    border: 1px solid transparent;
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
}

 /*** Top Navigaion Static Menu Item Links  ***/ 
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item {
    color: #21374C;
    white-space: nowrap;
    border: 1px solid transparent;
    padding: 10px;
    padding-left: 20px;
    margin-right: 1px;
}  
 
  /* Top Navigation static Menu Item Links Hover Style  */
.ms-core-listMenu-horizontalBox li.static > .ms-core-listMenu-item:hover {
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
    background-color: #0A85C4;
    color: #fff;
    text-decoration: none;
}
 
 /*** Top Navigaion Static Menu Selected ***/
.ms-core-listMenu-horizontalBox li.selected a.selected {
     /* Glass Effect Shade Image */
    background: url("/_layouts/Images/selbg.png") repeat-x left top;
 /* Glass Effect Shade Image */
    background-color: #0A85C4;
    color: #fff;
    text-decoration: none;
    border: 1px #134072 solid;
    padding: 10px 10px;
    margin: 1px;
}  

 /*** Sub-Menu/Flyover/Dynamic Menu Container ***/
ul.dynamic {
    background-color: #D5E4F2;
    border: 1px solid #000;
    padding: 1px;
    margin-top: 5px;
}  

/***  Sub-Menu Items (HyperLinks) Style ***/
ul.dynamic .ms-core-listMenu-item {
    background-color: #f7f7f7;
    padding: 10px 20px 10px 20px;
    white-space: nowrap;
}  


/*** Sub-Menu Items (HyperLinks) Hover Style ***/
ul.dynamic .ms-core-listMenu-item:hover {
    background-color: #61CBFD;
    color: #FFF;
}  

 /** Hide "Edit Links" ***/
.ms-listMenu-editLink {
    display: none !important;
}  

Rackspace has good CSS reference: http://sharepoint.rackspace.com/branding-top-navigation-in-sharepoint-2013, 

Here is my branded SharePoint 2013 top navigation menu bar.
 Here is my another post on: Branding SharePoint 2010 Top Navigation



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

11 comments :

  1. The idea looks impressive. Thanks!

    ReplyDelete
  2. it helps me more in office 365 site ..thank u

    ReplyDelete
  3. can u send me the code in css for qucik launch expand and close with arrows for office 365 site

    ReplyDelete
  4. This is great stuff, thanks.

    I have followed this step by step and the only issue I'm seeing is that the menus are not not picking this up at the sub-sites. I'm using Managed Navigation at the top level.

    I've also gone into the Design Manager and completed Step 7 to Publish and Apply the design by selecting: "Reset all subsites to inherit this site master page setting" as well as the Theme: "Reset all subsites to inherit the theme of this site"

    What am I missing? I really want to run with this for the entire site but if the sub-sites don't pick it up I will have to find another solution.

    Thanks for any guidance you can provide.

    ReplyDelete
    Replies
    1. Well, This is a known issue while using Managed navigation in SharePoint 2013. Subsites doesn't inherit the navigation from parent site. Fix is simple, go to subsites and manually re-apply the navigation settings. You can use PowerShell to set navigation options.

      Delete
  5. Salaudeen, thank you for getting back to me. I'll do what you recommend.
    This really is a slick solution, I really like what you have done.

    thanks again

    ReplyDelete
  6. Hey Salaudeen,
    I used your code and added this navigation menu to our sharepoint site. However, the second from the last tab stays highlighted as if the mouse is over it. Do you know how to stop this? Thanks!

    ReplyDelete
  7. Excellent Article!!! Can you tell me how I can make the text the color white? Right now mine is the SP default grey color. Thanks!

    ReplyDelete
  8. Great article...most helpful, thanks :)

    ReplyDelete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...