Friday, May 2, 2014

Quick launch (Left navigation) styles in SharePoint 2013

Modify the master page

  • Add a link to Custom Css in master page.
  • On the head tag of master page html add below highlight lines
<!--SPM:<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server"/>-->

<!--SPM:<SharePoint:CssRegistration Name="https://portal.sharepoint.com/Style Library/Master.css" runat="server" After="corev15.css" />-->

  • In your Custom master.css file, add the below CSS classes

 .ms-core-listMenu-verticalBox UL.root > LI > .menu-item{  
  font-weight:bold;  
  background-color:#5482AB;  
  color:#ffffff;  
  border-bottom-color:#ffffff;  
  border-bottom-style:solid;  
  border-bottom-width:1px;  
  min-height:25px;  
  padding-top:5px;  
  padding-left:10px;  
  font-size:12px;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li.static > a:hover {  
   color: #ffffff !important;  
   background-color:#D95E00 !important;  
   text-decoration:none;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.selected > a {  
    background-image:none;  
    background-color:#D95E00;  
   color:#ffffff !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li > a:hover {  
    background-image:none;  
    background-color:#D95E00;  
   color:#ffffff !important;  
   text-decoration:underline;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a {  
  font-size:12px;  
  padding-left:10px;  
  font-family:Arial, Helvetica, Sans-Serif !important;  
 }  
 .ms-core-listMenu-verticalBox > ul.root > li.static > ul.static > li > a.selected {  
   background:none;  
    color: #D95E00 !important;  
   background-color:#ffffff !important;  
    text-decoration: none;  
    border: 1px #fff solid;  
    font-weight:bold;  
 }  
 .ms-core-listMenu-verticalBox a.selected  
 {  
  border: 1px #fff solid !important;  
 }  
 .ms-core-listMenu-verticalBox UL.root UL  
 {  
  margin:0px 0px 10px 0px !important;  
 }  

28 comments:

  1. Great post, truly helpful and works like a charm in Office365 as well. You've saved me a lot of time!

    ReplyDelete
  2. This is a great post and saved me having to spend hours looking, one quick question how do you do the same for the blog quick launch as it is different to the standard quick launch?

    ReplyDelete
  3. Looks great, but how do I get this to accordion?

    Thanks.

    ReplyDelete
  4. Hi Ralph, please refer my next post for accordion http://akashkarda.blogspot.com/2014/06/quick-launch-accordion-with-arrow-in.html

    ReplyDelete
  5. How can I style only one link from left navigation ?

    ReplyDelete
  6. You can use jQuery to find the element based on text or id and then use .css method on element to apply your styles

    ReplyDelete
  7. Great work, thank you! Saved me a bunch of time

    ReplyDelete
  8. Hi Akash, how can i insert a twitter widget in place of left navigation panel ?

    ReplyDelete
  9. Awesome Post. Thanks!

    ReplyDelete
  10. Is this possible to use the script editor to either make a call to a CSS file or put the code CSS rather than editing the MasterPage?

    ReplyDelete
    Replies
    1. You dont need to modify master page, you can add Alternate CSS url as well. Go to Site Settings -> Master Page -> Alternate CSS URL , choose the third option and provide the css file url.

      Delete
    2. Hi, I went to Site Settings -> Master Page but I do not see Alternate CSS URL. I only see minimal.master, oslo.master, oslo.preview, seatle.master, seattle.preview, v4.master

      Delete
  11. Thank You Vary Helpfull

    ReplyDelete
  12. Very good article. thanks . Great post.

    My requiredment is collapse expand left nave box

    ReplyDelete
    Replies
    1. Could you please post if have any code for same.

      Delete
    2. Refer my article http://akashkarda.blogspot.com/2014/05/quick-launch-accordion-in-sharepoint.html

      Delete
  13. Great. So how do you change the menus on the existing subsites and pages. The master file does not look the same

    ReplyDelete
  14. Does with work with SharePoint Online Teams sites? I noticed there was no master.css file when I opened the site up.

    ReplyDelete
    Replies
    1. Yes, it will work in classic team site. Master.css is a custom css file which you can add to any document library and reference in master page.

      Delete
    2. Hi Akash

      This works great and i now have a nice looking menu at the side but how do i make sure it sticks with subsites and pages? as it defaults back to normal

      Delete