In every website, the navigation menu is the first look to visitors. So every one wants to design the header in simple and attractive. In default, thesis has one navigation menu. When you want to add more tabs in the navigation menu the first line will fill and it occupy the second line also. Due to one extra tab, it occupies more space in header and which seems in unfinished format. So to make the all the tabs in first line I decided to reduce the font size of each tab and it fill the first line but it looks tiny. Then, what is the solution to solve this? I realized myself and I decide to add one more navigation menu and I want to share with you. If you also came across this situation, I hope it will helpful for you. So, in this post you can learn how to add additional navigation menu in thesis theme.
I made the two navigation menus in my site. In this video I explained step by step how I add additional nav menu in thesis theme. If you can’t watch the video, don’t worry, keep reading rest of this post.
How to add two navigation menus in thesis theme?
To do these go to custom file editor and select custom_function.php
Paste this code to custom_function.php
/* to change default nav menu below header*/
/*paste in custom_function.php*/
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');
/* Add the second navigation menu */
/* paste in custom_function.php *******/
/* Links for top menu will need to be manually added here, since this menu isn't supported by Thesis */
function secondnav_menu() {
?>
<ul id="topnav_menu">
<li><a href="http://adwordsshop.com">Home</a></li>
<li><a href="http://adwordsshop.com/about">About</a></li>
<li><a href="http://adwordsshop.com/category/testing">Testing</a></li>
<li><a href="http://adwordsshop.com/category/softeware">Software</a></li>
</ul>
<?php
}
add_action('thesis_hook_before_header', 'secondnav_menu');
To style your navigation menu copy and paste this code to custom.css. you can customize this style sheet as your own requirement.
paste this code to custom.css
/* paste in custom.css file */
.custom ul#topnav_menu {
border-style: 2px solid #111;
background:#E4E4E4 none repeat scroll 0 0;
width: 100%;
float: left;
}
.custom ul#topnav_menu li { float:left; padding: 3px 5px 3px 5px; border:1px solid #111;}
.custom ul#topnav_menu li a { font-size: 1.3em; line-height:2em; color: #000000;background:#12cfff; }
.custom ul#topnav_menu li a:hover { color: #ff0000;baground:#eee; }
Here I want the default navigation menu below the header and new navigation above the header so I coded in custom_function.php which is in blue color. If you want the new navigation below the header you have to rename the before as after in this blue color line.
Now, you will see the two navigation in thesis theme.
Double navigation
I hope you enjoy this reading and I want to know what you think about this double navigation menu. In your site are you using single or double navigation menu? Which one do you like? Share your thoughts here. For more checkout our all Thesis theme tutorials..
{ 31 comments… read them below or add one }
This blog looks more like a thesis customation guide. Nicely done.
hi,
how to remove the bullet?dots in the left before the nav bar..
and how possible if i want this trick to be in normal nav, nor additional nav bar..how to make it?
thank you.
To remove bullets replace this below line in custom_function.php
id=”topnav_menu”
with
class=”menu”
now your new nav menu similar to default nav menu.
Bullets makes bad look on nav. better to avoid it.
hai vivek,
for your question.
In the custom functions.php code mentioned in this post remove first two line
remove_action(‘thesis_hook_before_header’, ‘thesis_nav_menu’);
add_action(‘thesis_hook_after_header’, ‘thesis_nav_menu’);
The last line change the hook name ‘thesis_hook_before_header’ into ‘thesis_hook_before_header’ you will get default navigation above header and additional navigation below header image.
The last paragraph in Suresh’s response has an error. It should read:
thanks…
This is perfection. Thank you!
sice the topnav_menu is an id but you saying to put “class=menu ” so does we have to change in custom.css to “.menu ” i don’t have bullet removed ..please help
hai Amit,
Give you site name…because we should do some changes in css code to fix nav menu according to your web page design. If you take any code from online you should do some css changes to fix in our web page. if name is id we should use #before the id name in css. The name is in class we should use . before the name..
This did not work for me. I did what you said about removing the bullet, but then it make the top nav turn into a bulleted menu. I also now have TWO default nav bars below the header.
You can see that here: http://lastshredsofsanity.com/wp-content/uploads/2010/05/MLT-Top-Nav-Not-Working.png
Please help?
hai Shan,
check your custom.css code.. all the codes are available are not.. give your site name to find your issue…
will this work in thesis 1.7
I have been trying to do your tutorial on adding background images in thesis theme nav menu and it keeps shuting down my site and I have to have it reloaded. Is that because I have 1.7 and if so what do I need to do differently ??
Cheri (www.diyclubinc.com and http://www.itssoverycheri.com)
Hi It will work in Thesis 1.7 also.
The error due to any code missing.
Again copy the code & try it.
I copied it and pasted it for this tutorial and it shut my site down again–why
Cheri
hai Cheri,
I think you may missed semicolon or closebraze at the end..
check this code in custom_function.php file via ftp.
I copied the entire code and pasted the entire code, how would I miss a semi colon or close braze?
I had already watched the thesis video and had moved my nav bar below my header, is that part of the problem (duplicating the same code, since that action has already been done?)
If you have any suggestions you can e-mail me directly at cheri@itssoverycheri.com
I really want to do both tutorials moving the header to both above and below my nav bar and then also adding the custom nav bar but both crash the site when I copy and pate.
Would it be better to do one before the other?
Thank,
Cheri
now i see your nav above and below the header.
I would love to add an additional nav bar under the current nav bar on my page. I would like the second nav bar to be “thinner” (as in not as tall) than the first nav bar. I would also like to try to match the color to the green color on the side of the page. I have no clue.
Is there any way you can help me with this? Thanks a million (in advance)!
Hi mary,
Our thesis team totally move to our membership site fourbloggerclub. so nowadays we are solve any single thesis issue for $$ only. it is ok for you. send your requirements.
contact us via contact form
Thank you very much. You rock.
Hey Suresh.
for some reason the tabs are not clickable…
maybe you can check it out..
thanks..
well, now i see it’s clickable in IE8 but not in FF…
and is there a way to make this menu act like the default menu ?
i want to change the gap between the tabs..
and is there a way to add a different image to each tab ?
thanks
Very helpful post. I’m trying to tweak it to fit one of my sites. I’ve looked at a number of similar 2nd nav codes and this is the best one I’ve found. Thank you.
There is one error in the custom.css code. The last line says this:
It should read:
hay thanks…..
This article is kick-ass. It adds functionality to the already full of bells and whistles thesis theme. I bookmark this for my future reference.
Thanks a lot to the poster.
Awesome stuff.. helped me in adding an additional nav menu just the way i wanted.. Thanks a lot for sharing
how do i make the second nav menu to show current state? For example if a user clicks on about it will show they are currently on the about page.
this code is for my main nav menu:
.custom ul.menu .current a { color:#1C7519;}
but i can’t seem to figure out a code for the second nav menu.
Hi , i tried doing this . It worked but as soon as i cleared my caches it doesn’t work anymore
..please can you tell me what do i do next?
My another navigation menu i.e category menu which i have put in after header went above the header and pages vanished which i had put in above header . Please help me
Thanks for that…I’ve been wanting a second navbar; didn’t know I could do it in Thesis ’til the Thesis creator mentioned it on his blog.
My DH struggled a bit with the process (he’s the geek, I’m the IMer), but now we’ve got it up and running.
cheers for this m8 have been trying to activate the menu option in my wordpress theme for the past few hours, thought i was gona be stuck with having to edit the menu in my websites html every time i needed to add or change a nav.