Full-width headers in Thesis 1.5

Although the title is “in Thesis 1.5″ this tutorial is still relevant. I have made a couple of updates since it was first written to accomodate more recent changes in Thesis, but really this tutorial is for Thesis 1.5 and beyond!

I previously published a tutorial on full-width headers in the Thesis theme.

It wasn’t the easiest thing to do in Thesis, prior to version 1.5, to make a full-width navigation area beneath a full-width header. Now thanks to a new hook,thesis_hook_before_content_area, it has become significantly easier and way better!

The code in the previous tutorial had us make a new title area in order to place the nav areawherever we wanted. However, that created some invalid code, by duplicating div id="header"¹. We don’t need to do that anymore!

STEP 1 — FULL-WIDTH FRAMEWORK ∞

In the Thesis Design Options you need to set your framework to full-width.

This produces HTML that look like:

<div id="header_area" class="full_width">
 <div class="page">

  <ul id="tabs">
   ...
  </ul>

  <div id="header">
   <p id="logo"><a href="http://snoopy.local/mu">Snoopy Test Sites</a></p>
   <h1 id="tagline">Just another Snoopy.local weblog</h1>
  </div>

 </div>
</div>

With that in place you can create a full-width header background with CSS.
This goes in custom.css

.custom #header_area {background:#213C63;}
 .custom #header_area .page {background:transparent;}
  .custom #header {border-bottom:0;}

Update 25^th February 2010: Added CSS for .custom #header_area .page to work with the new CSS in Thesis 1.6 related to the colour Design Options.

STEP 2 — FULL-WIDTH NAV AREA ∞

The code you need for a full-width nav area goes something like…
This goes in custom_functions.php

function full_width_nav() { ?>
 <div id="nav_area" class="full_width">
  <div class="page">
   <?php thesis_nav_menu(); ?>
  </div>
 </div>
<?php }
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_content_area', 'full_width_nav');

The line remove_action('thesis_hook_before_header', 'thesis_nav_menu'); removes the nav menu from its default position, allowing us to reinsert it wherever we want.
add_action('thesis_hook_before_content_area', 'full_width_nav'); adds the new navigation area after the full-width header area. If you’d like it to go before the header, useadd_action('thesis_hook_before_html', 'full_width_nav'); instead.

The rest of the code gives us a nice bit of HTML, similar format to the other full-width areas of Thesis, which we can style with CSS.
.custom #nav_area {background:#F0ECDB;}
And here’s just a bit more CSS to make it look prettier…

.custom #nav_area {background:#F0ECDB; border-bottom:1px solid #DBD4B7; padding-top:10px;}
 .custom #nav_area .page {background:transparent;}
  .custom ul#tabs {border-bottom:0; border-color:#DBD4B7;}
   .custom ul#tabs li {border-color:#DBD4B7; background-color:#E6DEC0;}
   .custom ul#tabs li.current_page_item, .custom ul#tabs li.current-cat {background:#fff;}

Update 12^th May 2010: Added CSS for .custom #header_area .page to work with the new CSS in Thesis 1.6 related to the colour Design Options.

Check out my previous tutorial, or CSS custom headers for info about adding images to your header. Also see Thesis nav menus for more info about the navigation code.

Source-http://www.kristarella.com/2009/04/full-width-headers-in-thesis-15/