Facebook Login and Facebook Sign Up General Safety Tips

Create A Custom Navigation Bar In Thesis Header Like Our’s

This tutorial will help the users of Thesis theme to create a custom Navigation bar in their Thesis Theme Header, like we have in our blog. Although, it is quite easy and not much coding is required, but still many newbies will like to know this. Thanks to FamousBloggers for this tutorial. This will only work in Thesis Theme, so please don’t try in any other themes.

Steps to Create a Custom Navigation Bar

1. Download and install Thesis OpenHook. This plugin allows you to insert arbitrary content into the many hooks that the Thesis Theme Framework provides. So you won’t need to edit files manually.

2. Login to your site’s admin panel and go to Thesis > Custom File Editor. Add the following code at the end of the file and press the SAVE button.

[sws_code language="css"] [/sws_code]

3. Then go to Appearance > Thesis OpenHook and paste the following code in the BEFORE HEADER box, and click SAVE button.
<ul id="topnav">
<li><a href="http://www.xinz.org/" title="Tech and Money Making Blog">Home</a></li>
<li><a href="http://www.xinz.org/coupon-codes/working-hostgator-discount-coupons-2011/" title="Hostgator Maximum Discount">Hostgator Coupons</a></li>
<li><a href="http://www.xinz.org/affordable-wordpress-seo-services/" title="Best WordPress SEO Services">SEO Services</a></li>
<li><a href="http://www.xinz.org/write-for-us-xinz/" title="Write for us | Guest Blogging">Write For Us</a></li>
<li><a href="http://www.xinz.org/contact-2" title="Contact Us">Contact</a></li>
<li><a href="http://www.xinz.org/privacy-policy/" title="Our Privacy Policy">Privacy Policy</a></li>

**Change the URL’s to your own links.

That’s it, you have done it !!! You will get something like thisNavbar

    You May Also Be Interested In...

  1. Thesis 1.8.2 Released, Full Compatibility with WordPress 3.2
  2. Thesis 1.8.1 Released, v2 On The way
  3. Why Thesis Is The Best SEO Theme For WordPress
  4. BlogSkin 1.5 Beta For Thesis Theme
  5. BlogSkin for Thesis Theme

Article by

Admin is the Founder and Administrator of Tech Blog. He love to explore the tech world. He is a part time dedicated blogger, coder and designer of Xinz.

Sarami has written 309 awesome articles for us at Tech and Money Making Blog

| Facebook | Blog → Tech Blog

{ 6 comments… read them below or add one }

1 Irfan July 19, 2011 at 8:02 pm

How about if you teach us on how to make the bottom navigation bar like you have?


2 Sarami July 20, 2011 at 10:06 am

Can you let me know about which bottom navigaton bars are you talking about? If those are the categories one, then that nav bar is inbuilt in theme..


3 Ammar August 4, 2011 at 9:45 pm

I just got my new Thesis theme and a Blogskin for my new blog.
I have a problem I can’t create the Navigation Bar like yours and my theme also not show “Keep Reading” button on my (teaser)homepage. Pls Help


4 Sarami August 4, 2011 at 9:59 pm

It will be better option if you seek help from thesisawesome support forum, as providing support for premium themes is not allowable outside the official forum.


5 Ammar August 5, 2011 at 7:21 am

Thanks for your quick response.


6 Ammar August 5, 2011 at 7:39 am

I visit Famous Bloggers website and make a research then I try it again and use following code Before Header and this one works now. With following code

id=”top”>AdvertiseAffiliatesGuest PostBadgesAbout usContact<a


Leave a Comment

Previous post:

Next post: