Thesis 1.6 Nav Customization

by Matthew on December 30, 2009

Next on my to-do list is the site navigation. As I’m still coming to grips with the inner workings of Thesis, I’m beginning with code and instruction from Kristarella’s Thesis Full-width Headers 101 post. Unfortunately, this article seems to have been written with older versions of Thesis in mind and doesn’t treat the drop-down menus very nicely, and so I find myself needing to run in new directions with the ideas.

First problem, the header and the nav are contained within the same #header_area element, which makes it difficult to style them separately. This code will rip the nav out of the header and recreate it in a new element of its own, #menu_area:

//separate nav from header
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
function full_width_header() { ?>
<div id="menu_area" class="full_width">
<div class="page">
<?php thesis_nav_menu(); ?>
</div>
</div>
<?php }
add_action('thesis_hook_before_html', 'full_width_header');

Visually, the design remains the same. But if you investigate the elements by viewing the source code or a plugin such as Firebug, you will find they now exist separately in their new elements.

A brief detour into Thesis Options, accessing the Navigation Menu > Feed Link in Nav Menu and I am disabling “Show feed link in nav menu” as I intend later to place my feed elsewhere.

Also hit Framework Options > Outer Page Padding, and I’m setting this to 0.0.

And now a dash of style. I’m going to be writing some of my own CSS in the custom.css file, and leaving the rest to the Thesis interface in the interest of keeping my own additions as light as possible or, in some cases, as light as practical. Tackling the nav first, and leaving the header alone. This code overrides Thesis’ border controls in the interest of necessity, but leaves text and background colors configurable from within Thesis’ Design Options.

Add this to your custom.css file.

.custom a {
outline: none;
}

.custom #menu_area {
border-width: 0 0 1px;
border-style: solid;
}

.custom #menu_area .page {
background-color: transparent;
}

.custom .menu {
border: 0;
}

.custom .menu a {
padding: 1em 2em;
border-width: 0 0 1px 0;
}

.custom .menu .submenu a {
padding: 0.636em 0.818em;
border-width: 1px;
}

.custom #menu_area, .custom .menu {
background-color: #000;
}

.custom #menu_area, .custom .menu a, .custom .menu .submenu a {
border-color: #f00;
}

The CSS above separates padding for the main nav bar and sub-nav drop-downs so that the bars can be set to different sizes; adjust the two padding attributes above to taste. Background and border colors for the menu can be set using the two color attributes at the tail end of the code. Other colors should be set from within Thesis’ Design Options for “Nav Menu”. That keeps things simple, and I think makes for a very attractive menu with a minimal amount of code. And what we end up with is this:

{ 6 comments… read them below or add one }

Kayle Simon January 13, 2010 at 1:11 pm

Love the look of your nav and with your helpful post, tried to recreate it, but the code just disappears when I put it into my css file. You aren’t clear on where the first code you specify goes, but I’m figuring that gets added to the php file? Actually I tried it in both places, and still can’t get this to work out.

Are there other settings in thesis that you haven’t told me about? It’s so weird, I copy and paste the CSS code into the custom file, click save, and the whole css file goes blank and has to be roaded. What am I doing wrong…it all looks okay to me, from a css code perspective, but perhaps the menu div isn’t being created correctly or something.

Reply

Kayle Simon January 13, 2010 at 1:15 pm

I tried using BBEdit rather than adding the CSS code through the thesis admin window, and it worked great; so nevermind.

Reply

Matthew January 13, 2010 at 7:56 pm

Sometimes when you copy and paste code from the web, it copies with “unstraightened quotes”, which can wreak havoc when pasted into your source code. By running them through a plain text editor first, those bad quotes are usually changed into proper straightened quotes, and thereafter function as intended.

I’m glad you found my article helpful.

Reply

Doug Moore January 27, 2010 at 5:09 am

Matt thanks for the tutorial…

I would like to try and center up the menu. Any thoughts on how make that happen..

Reply

Matthew January 27, 2010 at 11:23 am

Hi Doug,

Easier said than done, I’m afraid. The menus are built on lists, floated left via CSS to force them into a horizontal layout. Unfortunately, floating lists left defies centering.

You can probably get around this, but it’s going to depend on your comfort level with CSS.

Without getting into code, the steps I would take are:

1) Set you list items to a fixed width, text-align center. Based on the width and spacing of each item, calculate the total width of your menu.

2) Constrain the containing div to the total width of the menu. This will place the list into a box of fixed dimensions, that we should be able to center on the page by setting margin: 0px auto; in CSS.

The key to all of this is in knowing the exact width of your menu items.

Reply

mike February 8, 2010 at 2:37 am

Thanks, this tip was wonderful!

Reply

Leave a Comment

Previous post:

Next post: