Full Width Navigation in Thesis

When building full-width Thesis websites, you’ll often want to apply a different background to the navigation and header area.

Using the hooks thesis_hook_before_header and thesis_hook_after_header won’t work, since they’ll put the navigation outside of #header but still inside #header_area (the full-width wrapper for #header). Here’s how you can stick it before or after the #header_area, in its own full-width wrapper.

Navigation before the header

We’ll remove the default navigation, add our new navigation function to the hook thesis_hook_before_html, then actually define the function.

remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_html','custom_nav');

function custom_nav() { ?>
<div id="nav_area" class="full_width">	 <div class="page">	 <?php thesis_nav_menu();?>	 </div>	</div>
<?php }

Navigation after the header

We’re going to do the same as above, but use the hook thesis_hook_before_content_area instead of thesis_hook_before_html.

remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_content_area','custom_nav');

function custom_nav() { ?>
<div id="nav_area" class="full_width">		<div class="page">			<?php thesis_nav_menu();?>		</div>	</div>
<?php }