Wednesday, May 7, 2014

Change Quick Launch Width in SharePoint 2013/2010/2007

When using lengthy titles in SharePoint 2013 quick launch bar, we may have to increase the width to fit the contents without wrapping to next line. Here are the nifty collection of CSS styles to change the width of left navigation in SharePoint.

SharePoint 2013 left navigation width:
<style type="text/css">
/*increase quick launch width */
#sideNavBox
{
  width:250px;
}

/*Middle Content */
#contentbox{
margin-left: 290px;
}

</style>

SharePoint 2010 increase quick launch width:
<style type="text/css">
/*sharepoint 2010 change left navigation width*/
 #s4-leftpanel
{
 width:180px;
}

/*Middle Content */
.s4-ca {
margin-left: 200px;
}

</style>

Change SharePoint 2007 quick launch width:
<style type="text/css">
/*sharepoint quick launch column width*/
.ms-quicklaunchouter
{
 width:150px!important;
 }
</style>
All of these SharePoint quick launch width changing CSS codes can be from Script Editor Web Part, SharePoint theme CSS file, Alternate CSS, placed in CEWP , Master page or Web Part page edited with SharePoint designer 2010 to increase quick launch width.

Here is the Before and after screens:
Before changing SharePoint 2013 left navigation width
sharepoint 2010 change width of quick launch
 After change width of left navigation:
 sharepoint 2013 increase quick launch width



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:

12 comments :

  1. Hi,
    The code should be with contentBox and not controlBox.


    /*increase quick launch width */
    #sideNavBox{ width:250px;}
    /*Middle Content */
    #contentbox{margin-left: 280px;}

    ReplyDelete
  2. Hi,

    Thanks for this code - it works but then my content in the middle gets moved way down as a result, with a bunch of white space to the right of the links now. What can I do to fix this?

    Thanks so much,
    Nicole

    ReplyDelete
    Replies
    1. Increase the Margin-Left property of ContentBox. E.g. #contentbox { margin-left: 320px; }.

      Delete
    2. same problem for me. works with capital B in #contentBox
      /Tom

      Delete
  3. It doesnt seems to work for me... I just copy paste in the content editor is it right ?

    ReplyDelete
    Replies
    1. I'm using sharepoint 2010 if its making any difference

      Delete
    2. CSS styles given under SharePoint 2010 should work fine. Try Increasing the width to see the difference.

      Delete
  4. It is working but the text is not following. The band increase but the text zone rest the same. Any Idea ? Thank you

    ReplyDelete
  5. In SP 2013 for me it was moving the page content over but not actually changing the menu space. Fixed by adding !important after the sideNavBox width. CSS as follows worked for me:

    /*increase quick launch width */
    #sideNavBox
    {
    width:300px !important;
    }

    /*Middle Content */
    #contentBox{
    margin-left: 310px;
    }

    ReplyDelete
  6. I tried this code in SP2013 by going to page, edit, insert, embed code. It appears to initially change the spacing, but when I save my changes, it reverts back to the old spacing and the code disappears. What am I doing wrong?

    ReplyDelete
    Replies
    1. Try using the Script Editor web part or a similar web part that lets you embed code, rather than just using the basic embed option.

      Delete
  7. Read the first comment... change "contentbox" to "contentBox" and it should fix the middle content issue. Always remember to capitalize all the words after the first word!

    ReplyDelete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...