Aweber - Email Marketing Made Easy
Full Width Navigation Menu in Thesis

Full Width Navigation Menu in Thesis

January 7, 2011 · 5 comments

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.

Was this post helpful? Consider subscribing to my blog via RSS or

This Site Runs on the Thesis WordPress Theme

Thesis Theme thumbnail

If you're someone who doesn't understand a lot of PHP, HTML, or CSS, Thesis will give you a ton of functionality without having to alter any code. For the advanced user, Thesis has incredible customization possibilities via extensive hooks and filters. And with so many design options, you can use the template over and over and never have it look like the same site.

If you're more familiar with how websites work, you can use the fantastic Thesis User's Guide and world-class support forums to make more professional customizations than you ever thought possible. The theme is not only highly customizable, but it allows me to build sites with a much more targeted focus on monetization than ever before. You can find out more about Thesis below:

{ 5 comments… read them below or add one }

Ahmad Wali February 8, 2011 at 9:19 am

The given code is not working I am using full width framework. After inserting the code only nav menu showing before content, but not showing full width header!

Reply

Thesis-Blogs.com February 9, 2011 at 6:31 pm

The code isn’t supposed to show a full width header. It creates a full width navigation menu. I’ve used the code numerous times and it works just fine. Double check that you are following all the steps correctly.

Reply

Cal July 30, 2011 at 6:42 pm

Works great. Thanks!

Reply

phil January 8, 2012 at 4:18 pm

you might just want to mention that you need to change to full-width framework. not so unimportant, dude.

Reply

Thesis-Blogs.com January 8, 2012 at 7:30 pm

You mean these two lines in the post don’t make it clear enough? Seems kinda obvious, dude…

It’s for those cases when you’re using the full width framework in Thesis

Make sure you’re using the Full Width Framework setting found in your Thesis Design Options under “HTML Framework.”

Reply

Leave a Comment

When commenting, you can use basic HTML tags. If you are pasting in any code, please escape it here and then include that code within <pre></pre> tags. Thanks!

CommentLuv badge

Previous post:

Next post: