Hide or change quick launch’s width with CSS

Hide quick launch

To hide the quick launch the following CSS can be used:

	<style type="text/css">
	.s4-ca {
	 margin-left: 0px;
	}
	#s4-leftpanel {
	 display: none;
	}
	</style>

Change quick launch’s width

Quick launch’s width can be changed with the following CSS:

	<style type="text/css">
	.s4-ca {
	margin-left: 200px;
	}
	body #s4-leftpanel {
				   width: 200px;
	float:left;
	}
	</style>

The CSS can be added to a content editor web part to apply the change to a particular page or can be added to the master page to apply it for the whole site.

Another way to apply it to one site it to create a css file (let’s name it MyCss.css) and paste the css code above. Then upload the file to the site’s style library. Then set the site’s AlternateCssUrl property to the uploaded css file. That can be done using the following PowerShell script:

	Add-PSSnapin Microsoft.SharePoint.PowerShell -ErrorAction SilentlyContinue
	$web=get-spweb http://weburl
	$site.AlternateCssUrl="http://sitecollectionurl/Style%20Library/MyCss.css"
	$web.Update();

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: