How to Extend the Width of Your Thesis Navigation Bar

by Martin Malden

Shortcut: if you want to go straight to the process for extending your navigation bar to the width of your content box click here.

The process for extending it to the width of your entire site is here.

Thesis Theme for WordPress. Update – 18th August, 2012

The Thesis navigation menu bar system is being dropped when Thesis 2.0 is released, so you will need to switch to the WordPress nav menu system.

If you haven’t already done so, here’s the step-by-step process.

Update – 17 July, 2012

In Thesis 1.8.4 the concept of ‘Design Mode’ was introduced.

If you make design or layout changes but they don’t show up when you check the front of your site, you’re probably not using Design Mode.

See how to fix it here.

Original article starts here:

I received an interesting question the other day: how do I make my Thesis navigation bar wider?

If you rely on the Design Options screen (Fonts, Colors and More) to customise your navigation bar, you’ll only be able to affect the actual menu tabs, not the entire menu bar extending the width of your content box.

And if you only have a few menu items they won’t fill the entire width of your content box, which can leave your navigation tabs looking a bit lonely.

The solution is quite simple, but you will need to use the custom.css file to achieve it.

How to extend the width of your Thesis navigation bar across the content box

To make your navigation bar extend to the width of your content box you need to create the same background colour for the entire navigation menu bar as you use for the ‘link background color’ option in the Design Options > Fonts, Colors and More > Nav Menu screen.

As always, do as much of your customisation as you can in the Design Options and Site Options screens. Doing that keeps your code as efficient as possible.

Only when you come across something you can’t achieve in those screens should you head over to the custom.css file.

This is one of those times.

So set up your navigation menu colours in the Nav Menu screen, and make a note of the 6 digit colour code that appears in the colour sample of your ‘link background color’ option.

Then click on the ‘Custom File Editor’ link to access your custom.css file.

In your custom.css file paste this line:

.custom .menu { background-color: #000000; }

… but replace the 000000 following the hash with the 6 digit colour code you copied from the ‘link background color’ option in your Nav Menu screen.

Hey presto – that will give the entire menu bar the same background colour as the links (menu tabs), extending it right across your content box.

Extend your Thesis menu bar to the full width of your site

If you’re using the full-width framework and want to extend your menu bar across the width of your entire site, as I did here and here, then you can follow one of these processes. Either:

  1. Create a small image, the same colour as your menu bar background, the same height as your menu bar, and about 10px wide
  2. Set this image as a background image in your header_area div
  3. Add this attribute to your header_area selector, after the backround-image declaration: backround-position: bottom;

That was the approach I used on the first site I linked to above, and it extends the menu background image across the bottom of your header area, covering the entire width of your site.

Alternatively:

  1. Make the header_area background the same colour as your menu bar background
  2. Create a narrow image (10 – 15px wide) whose colour and height exactly matches the ends of your header graphic
  3. Set this image as a background image for your header_area so it merges with your header graphic. Do not add the background-position: bottom; declaration

That was the approach I used in the second site I linked to above.

As long as the height of the narrow background image exactly matches the height of your header graphic it will leave a gap at the bottom of the header area div showing the background colour. This will match the height and colour of your menu background, extending it across the width of your site.

If there are any differences in height, and you’ve exactly matched the height of your menu bar or header graphic, you may need to adjust either padding or margin settings in your header div until everything lines up.

If you’ve created a special background image to give your navigation menu a bit more zip, you’ll need to follow the first option above, but use the same image as your header_area background image (background-position: bottom;) as you do for your menu background image.

I described, step-by-step, how to use a background image to give your menu bar some more zip, and set out the code to use, here.

That’s it – you’re all done. Any questions leave a comment or drop me a line.

For more tutorials on customising your Thesis design take a look through these articles.

Cheers,

Martin Malden.

Please share this article - I'm counting on you!
       
Found this article useful? Get free updates!

Get regular updates, plus a free eBook on how to set up a business online - join us!

Your details are safe with me.
My Privacy Policy.

Previous post:

Next post: