I am referring to the left-side column in the image listed down below where the mouse cursor is:

enter image description here

My "Site Contents" list many pages and lists my team frequently uses, and many of the lists have at least 24 characters in its name.

  • Hi @Nav I am sorry I am puzzled! I don't know what do you need specifically! Are you need to reduce the left navigation bar width! or just site contents or what? :) In case of you need to change the width of left navigation try this CSS <style> #DeltaPlaceHolderLeftNavBar { width:100px ! important; } </style> Mar 10, 2017 at 0:03
  • I need to increase the width, some of my list names are 24 characters long and do not fit and my team cannot see which list is which because all the lists use the same first three words. It is only the last three words of the name does the list become unique, but the width of the column isn't big enough to see it. Mar 10, 2017 at 0:11
  • @M.Qassas how do I access the source code to implement that CSS style in my SP site? Mar 10, 2017 at 0:13
  • just try it first in Script editor web part by editing the page and add Script editor web part then paste the above style, check if it suitable for your requirements or not, and feedback me to post the detailed answ.er Mar 10, 2017 at 0:16
  • You can create a CSS file that contains the necessary adjustments and upload that to any document library on your site (I suggest the Style Library). Then go to your Site Settings > Master Page settings screen. On this page there is a setting that lets you select a style sheet to apply to every page in your site collection. Select the CSS file you just created and click OK. Mar 10, 2017 at 3:27

1 Answer 1


There are 2-3 ways to change the width of Left Bar. You can make changes in Master page if you have access to it. Or you can write below code to your css file which is common for whole site:

#sideNavBox{width: 200px !important;}


Apply CSS to whole site These are the steps: Step #1: Enable Publishing Infrastructure. Site Settings > Under Site Collection Administrator- Site Collection Features > Activate SharePoint Server Publishing Infrastructure

Step #2: Current Master Page: Site Settings > Under Look and Feel - Design Manager > On Left Side Panel - Publish and Apply Designs > Assign Master Pages to your site based on Device Chanel You will see Pop Up and there you will found Default Master Page. On scrolling down You will see Alternate CSS Url Click on that and You will be able to give url of your own css file which will work for whole site.

If you want to know more about how to create and to modify Master Pages click here

  • Where can I find the master page or the CSS file? I went to Site Settings > Master Page but I have a listview of names such as "minimal.master" and "oslo.master" and "oslo.preview" and whatnot and cannot seem to access the CSS file to add in that code. Mar 13, 2017 at 15:15
  • @NavBowman I have edited my answer. That may help you for your site Mar 15, 2017 at 10:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.