Follow @BPSPro

WordPress Sidebar CSS Code – WordPress Navigation CSS Code

2 Comments RSS Site Feed Author: AITpro Admin
Published: May 14, 2010
Updated: October 6, 2012

The orginal question was regarding editing the WordPress sidebar navigation code in the style.css file to change the visual appearance of the WordPress sidebar.

The link you provided goes to an HTML website. Your web host is BlueHost so I tried the default WordPress folder that they provide during their WordPress installation >>> /wordpress and I did not see that WordPress was installed.

Why would you want to delete the WordPress navigation bar??? Technically called the WordPress sidebar. Typically you would want to change the position of navigation sidebars in WordPress not delete them. The visual appearance of WordPress navigation sidebars is changed by editing the CSS code for your particular WordPress Theme. Every WordPress Theme has a style.css file that controls all of the visual aspects of the particular WordPress Theme that you are using. WordPress sidebars not only contain your navigational links, but also provide the place for WordPress widgets to be installed. Without a WordPress sidebar you will not be able to add WordPress widgets. Now you can customize the WordPress sidebar so that no navigational links are displayed, but sidebar navigational links are very important for SEO as well as many other critical WordPress functions.

Anyway for anyone who was looking for the answer on the easiest way to go about modifying a WordPress sidebar you will open your particular WordPress Theme’s style.css file and at the same time open your WordPress website and look at the source code so that you can see the div and class names that you will be looking for in your Theme’s style.css file.

To view your WordPress website source code launch your website using Internet Explorer (or Firefox of whatever browser you use) right mouse click and select View Source. To make this simpler I am using my WordPress website as the example.

The CSS div and class names that I am looking in my websites source code will be located around where “Products and Services” is in my website’s source code because that is first text that appears in my particular sidebar. For your website it will be whatever text is displayed first in your sidebar ie Categories, links, stuff, etc etc etc.

The source code I see is this:

<div id="main">
<div id="main_left">
<div id="block_sidebar">
<div id="sidebar" >
<ul><li id="categories-3"><h2>Products & Services</h2>

This tells me that the main div container is called main – this is my div for the whole main container that wraps around both my left and main content area.
I have a div that is called main_left – this is the div that controls the left sidebar object itself as a whole
I have a div that is called block_sidebar – this div controls things inside of the sidebar
I have a div that is called sidebar – this div controls things inside of the sidebar

So if I want to modify in my Theme’s style.css file in order to change the position of my sidebar from being located on the left side of my website to being on the right side of my website I would just change the CSS float property in my Theme’s style.css file from float:left to float:right in the main_left div shown below.

#main_left{width:280px;float:left;marg… 5px 0px 0px;}
#main_left{width:280px;float:right;mar… 5px 0px 0px;}

padding, margins, images, text, etc within the sidebar would be controlled by changing the CSS properties for the block_sidebar div and the sidebar div.

Comparing your website’s source code to your style.css file is the simplest and quickest method I have found to quickly locate the particular CSS div or class that you want to modify in your WordPress Theme’s style.css file.

Actually creating your own WordPress sidebars or creating additional sidebars is a little more complex and requires more than just modifying your style.css file. You will need to modify your WordPress Theme’s functions.php file & modify or add a sidebar.php file. If anyone is interested in knowing how to do this then just send me an email. My email address is listed in my profile.

Hope someone finds this info helpful.

Official WordPress Sidebar Customization Resource Page

Skip to toolbar