Positioning a Sidebar within Your Header

Published March 30, 2011 | By Sarah

Some of you who followed my instructions on how to add a widgetized area to your header may only want the widgetized area in a part of your header instead of covering the entire area. You may be especially frustrated if you want to align your widget to the right. The easiest way to control the placement of this area is to wrap your sidebar inside of a div. Here are the basic instructions:

You’ll notice from the image above that there is a logo to the left (which needs to stay in that spot for every page, while a slider has been implemented to the right and is about 3/4 of the width of the header. The code below details how this was accomplished.

1.) Follow the steps in my first post on creating and adding your sidebar to the header.

2.) Surround the sidebar code that you added to your header php file with a wrapper div as seen below:

<div class="header-banner-wrapper">
?php get_sidebar('header-banner');
</div>

3.) In your style.css file, style your wrapper so that it is the dimensions and in the location you want it. Notice, that I set a margin of zero for the right side, so the widgets will automatically align themselves to the right within the sidebar and fill up the space that I’ve specified.

div.header-banner-wrapper
{
  position: absolute;
  width: 700px;
  height: 200px;
  top: 0;
  right: 0;
}

As always, make sure to copy and paste given code into a text editor first, and be sure to check the direction of the quotation marks.

7 Responses to Positioning a Sidebar within Your Header

skstarkiller says:

March 31, 2011 at 2:03 am

Thank you Sarah. I <3 You!

Reply
dancemyth says:

October 20, 2011 at 11:07 pm

Hey Sarah,

I had this code working just fine in a previous install of WordPress. Now I’ve started from scratch and have installed WPMU and am having issues. Everything is working fine, except for the placement of the widget. I would like it to be located in the bottom, left of my header. For the life of me, however, I cannot seem to get it to move from the top, center. What could I be doing wrong?!

Thanks in advance.

Reply
- Sarah says:
  
  October 20, 2011 at 11:12 pm
  
  That’s usually due to a tiny little coding mistake like forgetting to close a div class tag with end quotes, or in your css missing a semicolon, etc. Double check all of your code in both the header.php file where you assigned the div class for your sidebar as well as the css where you styled the wrapper. Also, ensure that your wrapper name is the same in both the css and the header.php file. I can’t give you any more suggestions without seeing an example, though.
  
  Reply
- dancemyth says:
  
  October 20, 2011 at 11:20 pm
  
  Nevermind…I figured it out. The first part of the problem was the location of the header.php code. It was inside the ‘centered’ div’s. The second part was me forgeting to put ‘px’ after my location numbers. Haha. =)
  
  Reply
  - Sarah says:
    
    October 20, 2011 at 11:24 pm
    
    Glad you got it working!
    
    Reply
Lynn says:

December 26, 2011 at 6:43 pm

Hi Sarah

Thanks to your instructions, I finally managed to get an extra block into the right of my header without messing up the whole page!

I actually wanted to call a PHP script for a banner rotator, which I discovered it wouldn’t accept within the normal text.html widget. So after a quick search I found a plugin called “Extended Text Widget” which I installed, and now it works a treat!

I’ve been pulling my hair out over this problem on and off for several months. My calls for help on various forums got no response, but thanks to you, I now have it working as I wanted.

Reply
- Sarah says:
  
  December 27, 2011 at 12:40 am
  
  Lynn, I’m glad you found a solution. As a note, you can also put php script directly into the header.php file within the same place you put that extra sidebar area. You can simply replace the sidebar code with the script for the slider instead.
  
  Reply