Full Width Navigation Menu in Thesis

This is an oldie by a goodie. You’ll find this code to create a full width navigation menu in Thesis on numerous respected blogs about Thesis, so there’s nothing new here. To give credit where credit is due, I probably first found this code on Kristarella’s site. But if you’re searching for a way to create a full width navigation on your Thesis site, you can get the answer here too.

Lately I’ve been using this more and more with websites I’ve been designing and building for clients, so I decided to make a post about it on my blog since I use it so often. It’s for those cases when you’re using the full width framework in Thesis and you want your navigation menu to extend the full width of the browser window. Kinda like you see on this site!

So here goes…

Step 1: The Function

Make sure you’re using the Full Width Framework setting found in your Thesis Design Options under “HTML Framework.” Now paste this code into your custom-functions.php file:

/* full width custom navigation */
function custom_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','custom_nav');

This will remove the nav from the default position before the header and place it before the content_area div. If you want it to go before the header, use add_action('thesis_hook_before_html', 'custom_nav'); instead. The added div’s will also apply the full width class to it, so you end up with the code you need for a full width navigation.

Step 2: CSS

At this point, you can style it any way you want. You target the full width navigation using this css:

.custom #nav_area {background:#F0ECDB;}

I’m not going to get into all the ways you can style it, but now that you know how to target the navigation area, you can do any kind of styling you want.

Tagged as: full width, navigation, thesis tips