This post has been marked as old. The code might no longer work. Comments have been disabled as this is no longer maintained. Use the search on the right to find a newer tutorial.
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.
[php]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 }[/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.
[php]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 }[/php]
littlelostrobot says
I love this Thesis layout, but had no idea how to implement it (i'm still trying to wrap my mind around the hooks).
Thanks for the tips.
Paulo says
Bill,
This code can be used by the plugin Thesis OpenHook?
Well tried it with him and did not work …
thanks
Bill Erickson says
Yes, it should work, but I would highly recommend not using OpenHook. If you make any mistakes with your code your site will be inaccessible and you can’t get back in to fix it. You’ll need to use an HTML editor to log in and correct the error, so you might as well just start with an HTML editor.
Pink Ronnie says
Awesome, thanks for this Bill! This was exactly what I needed….
Wendy says
Thank you for this short tutorial. I thought this should have been so easy and I’ve been looking to create the navigation before the header, not after.
Thanks again!
Hyder says
thanks for this article, this what i was looking for 🙂
Roland Plotter says
This is the most clear explanation I have seen so far on modifying the header nav. Hooks seemed so frightening, but I am starting to get comfortable with them. Ready to ween myself away from the packed Thesis themes and start doing my own coding. Thanks for the informative post.