How to change the width of left navigation area

Question

I am using SharePoint Server 2007 x64 and Windows Server 2008 x64. I have setup a site with template publishing portal. I have grant anonymous access to all the site.

I am using top global navigation bar and left side navigation bar. The current issue is, the length of characters of items on the left side navigation bar is short (e.g. I am using some short words, like car, pet, book, etc.), but the width of the left navigation bar is a couple of times width of the length of characters of items on the left side navigation bar, which makes the UI look a little bit ugly.

How to make left navigation bar's width automatically scale according to the width of the length of characters of items on the left side navigation bar? Or some ways to make the left navigation bar's width smaller?

Answer 1

My first thought here would be to see if you can do this using jQuery if you don't want to go in and create your own custom masterpage. I know that there are several posts on making the left nav accordion style here: http://www.endusersharepoint.com/?s=jquery+for+everyone. You might be able to modify this and use it to affect the styles of the left nav to make it grow or shrink according to the entries.

The only other way I know to do this is to create your own custom master page and deploy it to the site.

Answer 2

Either jQuery or CSS

Answer 3

You have to edit the master page respectively the css files of your website to change the look of the left navigation. The master page defines the main look and feel of you website and also includes both navigations controls.

The easiest way to do the editing is via the SharePoint Designer. You then have to open you root website with SharePoint Designer and navigate to the folder _/catalog/masterpage where you find all master pages available for you website.

I suppose you're using the default master page so you should open the file default.master. You will be asked if you want to check out the master for editing. Click yes to go on.

Now you see the HTML code of your master page which you can edit so the left navigation looks like you want it to.

When your ready with editing, save the master page and check it in by right click on the master page file and select "check in". In the next dialog select the option which says publishing as major version. After that you'll be asked if you want to go to the site to approve the new version. You have to do this so everyone can see the changes you made.