navigation

Thesis offers two types of HTML framework, page, which is the default, and full-width. Most of the sites that I’ve visited whether they be based on Thesis or not utilize the page framework. I utilize the full-width framework which enables the header to span the width of the browser page.

Kristarella has a great tutorial on full-width headers on her website kristarella.com.  This tutorial creates a separate nav_area and title_area which allows you to have separate colors for both. Here is the actual code that I added in the custom_functions.php. Mine is slightly different from what is in the tutorial as I have my nav bar positioned below the header area.

/* Full Width Header */
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
remove_action('thesis_hook_header', 'thesis_default_header');

function full_width_header() { ?>
  <div id="title_area" class="full_width">
    <div class="page">
      <div id="header">
        <?php thesis_default_header(); ?>
      </div>
    </div>
  </div>
  <div id="nav_area" class="full_width">
    <div class="page">
      <?php thesis_nav_menu(); ?>
    </div>
</div>
<?php }
add_action('thesis_hook_before_html', 'full_width_header');

You can customized the title_area and the nav_area in the custom.css like so

#nav_area{background-color: #FFFCB9;}
#title_area {background-color: #3A93CC;padding-top: 1em;padding-bottom: 0;}

One last thing that needs to be done is to add the following to the custom.css.
#header_area{display:none;}

{ 2 comments }