How To Move The Navigation Bar In Thesis Using Hooks

by Matt on June 11, 2009

Ok, ladies and gentlemen. I want to show you folks how to move around the nav menu in Thesis using hooks. First of all, I understand the initial aversion to coding. But don’t be a wuss and just try it out. Once you get going it is super easy. Second of all, every mac user who has ANY interaction with websites ought to own a copy of Transmit for all ftp work.

Let’s get started.

Open your ftp client and click on the wp-content folder.
Now select the themes folder.
Select thesis_151. If you don’t have Thesis 1.5.1 then get it!
Select the file labeled custom.
Right click custom_functions.php and select your editor. I use Dreamweaver for all CSS and PHP editing. However, you may use a simple text editor, such as textedit for mac.

After all the words and stuff you don’t understand, space a couple lines and enter the following:

remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_after_header','thesis_nav_menu');

Now save it and load it on your server. If you were smart, you would get a copy of Transmit. I swear that this will be worth every penny.

There you have it. You just moved your nav menu from above the header to below it. Wasn’t that easy? Check back often!

{ 5 trackbacks }

{ 39 comments… read them below or add one }

Tony August 6, 2009 at 11:11 pm

I am interested in moving the navigation bar to the right hand side of the screen. Is this possible?

Matt August 11, 2009 at 11:45 am

Totally possible. The setup depends on your layout. Two or three columns? Order of the columns? With those two pieces of info, I can tell you what you need.

Emily May 3, 2010 at 2:04 pm

I would like to do this also. Can you tell me the hook? I want the header on the left and nav bar on the right (right next to each other, with header being small about 20% width and nav bar abour 80%). I have 3 columns (Content, sidebar 1, sidebar 2).

Also, can the multimedia box play flash movie automatically without the visitor having to push the play button? or should i use the feature box?

Thanks in advance! I will totally donate to your donate fund! Love your site but need a little more help.

-Emily

Matt May 8, 2010 at 6:53 pm: Whether a movie plays without pressing play is not related to its placement in either the Feature or Multimedia box.
If you would like to discuss custom work, email me at thesistutor@gmail.com

Fred May 6, 2010 at 12:14 am

I read here that you say its possible to move the navbar to the right, can you post the code to do so? I have been able to move it; however, when I do in firefox the background color shows through the space to the left of the navbar. It looks fine on IE, but firefox not so good. I read you say it depends on the amount of columns. If so can you give me the variations for 1, 2, and 3? Also, what if I have custom template pages that have different column widths? Sorry, I knows its a lot

Holly July 11, 2010 at 4:41 am

Hi Matt. I’m just getting into thesis. You’re tutorials are great. I will be a fan for much time to come. I am looking for the fix that is asked above. I’d like to move the nav structure to the right. I’m running two side bars on the left side, right side content. three total columns. thank you.

Toki Tover September 10, 2009 at 10:32 pm

Hi,

I am actually having a problem with the nav menu not even showing up… Yet when I add that code it appeared below my header as advertised. But when I take that code away my nav menu disappears. Any advice… I am on wordpress 2.8.4 with thesis 1.5.1

Thanks!

Toki

Matt September 11, 2009 at 7:59 am: @Toki
In Thesis’ default state the nav should be above the header. make sure that you don’t have anything in custom_functions.php (other than the text and example function). Also, check your custom.css carefully to make sure something from there isn’t killing the nav. I assume you haven’t edited core files. Perhaps re-install thesis. Be sure to preserve all the work in your custom folder. I hope that helps. Let me know if I can help you out any other way.
Reply

Fenwick September 18, 2009 at 10:52 pm

Hi Matt,

I’m using Thesis 1.6.

I’ve added this code to my custom_functions.php file, but the nav menu is not moving below the custom header I have installed. Not sure why though, as I am not a coder. Any suggestions?

Any help greatly appreciated.

Matt September 19, 2009 at 2:09 am: @Fenwick
There are numerous changes to the nav in Thesis 1.6. I have to go through all of my nav related tutorials and make the necessary changes. That will take some time considering that I do not currently charge for the level of help that I give. Currently, I have no estimate as to when that will happen. Until I change every single video, you may email me and I will help you further.
Thanks.
Reply

Brian Blum October 14, 2009 at 11:32 am

I’m using Thesis 1.5.1. I followed your instructions, which I also found on other Thesis tutorial sites, but the nav bar just isn’t moving. I tried pasting the code in different parts of the file. Any suggestions?

Matt October 14, 2009 at 11:39 am: @Brian Blum
Where are you trying to put the nav?
Reply

Khan October 30, 2009 at 9:04 am

Matt – these tutorials are great! Thank you!!!

Stephen November 22, 2009 at 3:15 pm

How do you move the navbar from the top over to the right side of the page? I’m using Thesis (2 columns). Also, how’d you get the icons on the left side of your page?

And… the gray background… is it possible to make it a bright orange?

I’ve been searching all over creation and can’t seem to find what I am looking for. :-/

Matt November 22, 2009 at 6:39 pm: @Stephen
For Icons, go here: http://thesistutor.com/how-to-add-killer-social-icons-with-thesis/
For nav menu above sidebar, go here: http://thesistutor.com/how-to-move-nav-menu-above-sidebars/
If you are running Thesis 1.6, changing colors in the nav bar is done in Design Options. If you aren’t, then upgrade!!!
Reply

Rob January 6, 2010 at 6:22 am

Hi there. I’ve managed to move my nav menu to the left. It now sits above the left sidebar. However, the menu manes don’t sit above each other in a neat list. They look like so;
Home About Us
Services
Gallery
Contact

I need ‘About Us to be below ‘Home’. This is the bit of code I used to move the menu; remove_action(‘thesis_hook_before_header’,'thesis_nav_menu’);
add_action(‘thesis_hook_before_sidebar_1′,’thesis_nav_menu’);

And this is the bit of code that I thought would sort out the ordering issue;
.custom #tabs li { float: none; }

It hasn’t though! Another thing; the nav menu has a blue bg colour. When I rollover over a link there is a blue block of colour behind it. This is what I want, but the coloured block only extends to the edge of the word. I really want a coloured bar that is the width of the entire nav menu, not just whichever word I happen to be hovering over. I’m VERY new to Wordpress and Thesis. I usually construct websites in Dreamweaver where I can create cells and table and place things wherever I want them. this is all very alien to me, so any help would be greatly appreciated!
thanks. R.

Matt January 9, 2010 at 5:37 pm: @Rob
I hadn’t updated the code on that page (forgot). It is now correct. It should have read: .custom .menu li { float: none; }
Reply

Kuang January 16, 2010 at 12:24 am

already make that at my custom functions.php

but still cannot make my header at top
and navbar after that

Kuang January 16, 2010 at 12:26 am

already make that at my custom functions.php

// Using hooks is absolutely the smartest, most bulletproof way to implement things like plugins,
// custom design elements, and ads. You can add your hook calls below, and they should take the
// following form:
// add_action(‘thesis_hook_name’, ‘function_name’);
// The function you name above will run at the location of the specified hook. The example
// hook below demonstrates how you can insert Thesis’ default recent posts widget above
// the content in Sidebar 1:
// add_action(‘thesis_hook_before_sidebar_1′, ‘thesis_widget_recent_posts’);

// Delete this line, including the dashes to the left, and add your hooks in its place.

/**
* function custom_bookmark_links() – outputs an HTML list of bookmarking links
* NOTE: This only works when called from inside the WordPress loop!
* SECOND NOTE: This is really just a sample function to show you how to use custom functions!
*
* @since 1.0
* @global object $post
*/

function custom_bookmark_links() {
global $post;

remove_action(‘thesis_hook_before_header’,'thesis_nav_menu’);
add_action(‘thesis_hook_after_header’,'thesis_nav_menu’);

but still cannot make my header at top
and navbar after that

Louise January 23, 2010 at 12:37 pm

I’ve just purchased Thesis 1.6 and went through the tutorial on moving the nav menu below the header. I did everything correct, but it came up that it was a fatal error. my computer crashed and now I cannot open my website? Help.

Matt January 23, 2010 at 2:08 pm: @Louise
I’m not quite sure what to tell you. I just copied and pasted the exact code from the tutorial on a test site and it worked fine. And, this code certainly couldn’t have crashed your computer. I hope you get it worked out!
Reply

Dave March 11, 2010 at 1:13 am

Took me about 20 minutes to get the new nav menu at the top, and the old thesis nav menu at the bottom. Site is starting to look much better now. Thanks a bunch Matt.

Carol March 18, 2010 at 9:40 am

Brilliant – so easy and clear thanks a million!

Bella April 8, 2010 at 1:42 am

Added the nav bar below but now it’s doing something crazy! and my right sidebar has moved to the bottom. The last thing I did before this happened was add social icons to the header and then deleted it. I use open hooks, Thesis 1.7 , Wordpress 2.92. Thanks in advance for any help. Your tutorial was super easy.

Emily April 30, 2010 at 12:45 am

I can see you are very knowledgable about this and hoping you can help. I want my header and nav menu to be side be side (header to the left, nav bar to the right). Currently my header is above nav bar. I have 3 columns below (like this: content, sidebar 1, sidebar 2). Should this be done in custom functions? Can you help? Thanks! _Emily

TIM July 4, 2010 at 1:53 am

Hi Matt, thanks.

I’ve used your instructions in Thesis 1.7 on WP3.0 and the header just will not move….

I commented out the if statement if (use_codepress()) add_action(‘admin_print_footer_scripts’, ‘codepress_footer_js’); and I think it might have broken hooks?

Tim

Matt July 4, 2010 at 3:47 am: First, you can’t “break hooks”…lol The name of the function changed. Instead of thesis_nav_menu use wordpress_menu_support.
Reply

Tim July 4, 2010 at 3:52 am

Thanks Matt

Still no joy. Using the below…
remove_action(’thesis_hook_before_header’, ‘wordpress_menu_support’);
add_action(’thesis_hook_after_header’, ‘wordpress_menu_support’);

Benjamin August 4, 2010 at 10:23 pm

This worked perfectly. Thanks!

Belinda Wasser August 19, 2010 at 12:19 pm

Hello! Thank you so much for all these great posts!

If you’d please take a look at my site – I want to make the nav in the header function. I’m not even sure what to search on to make that happen… could you help please?

Thank you!

Paul August 20, 2010 at 6:22 pm

Hi Matt,
Really cool tutorial, but what I am also trying to find is how to make the navigation bar span all the way beyond the page like yours. Also I notice your navigation bar is an image. How do you do this? Thanks!
Paul