This is what we are going to create in this step by step tutorial. Click on the image to view the website in new tab.

Side-bar Navigation - Step 5.1

In Step 5.1, CSS3 style is applied to the Side-bar Navigation.

The style is provided below with HTML comment explanation.

/* Side-bar Navigation */		

.top-sidebar {          /* Style applied to the Side-bar */
	width: 20%;
	float: left;
	margin-left: 2%;
	padding: 2% 3%;
	margin-bottom: 2%;
}

.navigation {       /* Style applied to the navigation list */
 	display: block;
    list-style-position: inside; 
    list-style-type: none;  /* Removes the bullets */
    margin: 0;
    padding: 0.875em 0; 
}
		

Side-bar Navigation Step is now complete

Now the website will look like this. Click on the image to view the website in new tab.

Next Lesson > Step 6: Featured Panel