One of my most favorite clients, Indulge With AniciaB.Com, had some pretty cool images done for a nav bar.  I wasn’t too excited, because I thought it would be really difficult to put together and make it look as slick as the rest of her site did.  I’ve got a ton of hours in this site, as do AniciaB, and her assistants.  It is a work of love for all of us.

Well, check it out:

Is this sexy, or what?

I was so thrilled with the way it looked, that I set out to change the look of my own website, TraciGregory.Com.  So, I redid the logo (different post) and made my own set of images from various places (free icon sets mostly) and replaced my plain-jane navigation bar with them.  The results:

I love this!

So, how hard is it with thesis?  Piece of cake. I learned how to do this from Somone Bull, the enthusiastic Aussie behind Thesis Theme HQ

  • the first step is to add the Openhook Plugin, which makes operating the Thesis framework practically child’s play.
  • then, with the Openhook Plugin activated, find “Feature Box“.  (Thesis Openhook is listed under Appearance in your WordPress menu.)  Here you will enter the HTML that is your nav bar.  I’ve included html similar to the TraciGregory.Com website as it is considerably smaller than the IWAB site, and you don’t really need to see a dozen image links repeated. I’ve centered my links as there are only five, we know they aren’t going to fill the space.
<br />
<a title="Home" href="http://yourwebsite.com/specific-url"><img src="http://yoursite.com/your image file.gif" alt="" /></a> <br />
<a title="About" href="http://yourwebsite.com/specific-url"><img src="http://yoursite.com/your image file.gif" alt="" /></a>  <br />
<a title="Contact" href="http://yourwebsite.com/specific-url"><img src="http://yoursite.com/your image file.gif" alt="" /></a>  <br />
<a title="Video" href="http://yourwebsite.com/specific-url"><img src="http://yoursite.com/your image file.gif" alt="" /></a> <br />
<a title="Subscribe" href="http://yourwebsite.com/specific-url"><img src="http://yoursite.com/your image file.gif" alt="" /></a> <br />






You will need CSS code specific to your image based navigation, mine is below.  This is to be added in the Custom File Editor, the custom/custom.css file. ( I always date and name the additions I make to the CSS file and custom/custom_functions.php files so they are easy to find – and fix – or edit later.)

<br />
/* 10/30  RockStar Feature Box Images for Nav Bar*/<br />
.custom #feature_box {<br />
background: #fff;<br />
border: none;<br />
margin-right: 45px;<br />
padding-left: 45px;<br />
padding-right: 45px;<br />
}<br />






If you’re previewing your work, you’ll see you have the standard Nav Bar in its place, and the images Nav Bar below the header.  Is time to turn off the standard Nav Bar on the Openhook plugin page.  In the Before Header Section there is a box to Remove Thesis nav menu

And finally, you have to turn on the feature box in the Thesis Controls: Design Options: Feature Box.  Choose placement, AND home page or sitewide.  In this instance it is Full-width Above Content and Sidebars.  After you’ve made that choice, the option for the pages you want is available.

Find your images, and put them up for your navigation bar.  Give your site your personal, original look.  And, as always, Rock On!