How to Change the Header Image Above nav Menu in Thesis Theme?

In this tutorial you can learn how to change the navigation menu below the header image. As we know, Thesis theme is a high-quality template system that you can customize your own site as your wish. It will make your site rich look when compare to other templates. Thesis allows you to change the each and every page as your own customization. Have you installed thesis theme now in your site? Take your decision now, how you want the header will display above or below the navigation menu. Now decided read this rest of the entry and post your comment in comment section.

How to change the nav menu below the header image in thesis theme?

See this video tutorial:

If you can’t watch this video follow this step below:

Thesis Theme

By default, you will see the navigation menu will appear above the header image. If you don’t have search box in navigation panel use method 1.

Method 1:

Go to your custom file editor below the thesis option.

Then select custom_funciton.php and edit the file.

Copy this below code and paste into custom_functin.php

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

Now you will see the changes will be happened.

Method 2:

Nav above header

 

See here in my site due to addition of  search box in navigation panel I change the function name as function custom_nav() in custom_function.php.

Do you have the search box in navigation panel use this method.

Go to your custom file editor which is below the thesis option.

Then select custom_function.php and edit that file. Copy and paste this below code into custom_function.php

remove_action('thesis_hook_before_header', 'custom_nav');
add_action('thesis_hook_after_header', 'custom_nav_');

After you added this code you will see the below image like in your site.

Nav after header

If you want the border above the navigation menu copy and paste this below code in custom.css.

.custom #nav {
background: #eee;
border-bottom: 0.55em solid #3e3e3a;
border-top:0.55em solid #3e3e3a

}

Now your nav menu will look after  the header image with some border.

Do you have any trouble while using this code post your question below or use the contact us page. For more checkout our all Thesis theme tutorials..

{ 12 comments… add one }

Leave a Comment

  • Pascal January 25, 2010, 7:44 AM

    thanks for your kind words

    Reply
  • Tanmoy January 29, 2010, 10:28 AM

    I didn’t knew that thesis is too easy to customizable. Now this blog help me to realize.

    Reply
  • Pascal January 30, 2010, 12:49 AM

    Thanks Tanmoy. We have try to do our best to users who customize thesis.

    Reply
  • Tanmoy January 29, 2010, 10:30 AM

    This blog is best as it contains video.

    Reply
  • Pascal January 30, 2010, 12:50 AM

    If you like our video tutorials, don’t forget to subscribe in our youtube channel here. http://www.youtube.com/fourblogger

    Reply
  • Norman April 13, 2010, 6:05 PM

    Hi Pascal,

    Great website!
    I’m having a hard time executing this lesson though.

    I did one of your prior lessons for putting the nav bar below the header image.

    Should I erase all that code I did for that lesson and just replace it with the code here?

    I tried many variations of this and still can’t get my image into the nav bar. I’m pretty sure the codes is right, I’m just copy/pasting and making adjustments for image location.

    Can you help me out?

    Reply
  • Suresh April 14, 2010, 7:33 PM

    hai,

    I saw your site your header image is placed above the navigation menu. I think there is no problem for you…

    Reply
  • Yiannis May 27, 2010, 10:57 PM

    Hi Suresh

    As i see from your page your header is much higher than mine so i have a big white space on top of my header image. how can i change that to take the header higher?

    Also i wanted to ask you if it is possible to have a full width header image

    thank you

    Reply
  • Suresh May 28, 2010, 10:11 AM

    hai Yiannis,

    To r remove whitespace above header add the below two lines in your custom.css file
    .custom #header_area .page {padding-top:0em;}
    .custom #header {padding:0em;}

    Reply
  • Deepak September 12, 2011, 11:53 AM

    Is there any seo freindly theme other then thesis …..?

    Reply
  • FourBlogger September 12, 2011, 12:54 PM

    More number of SEO themes available. But compare with Thesis Theme, Thesis is the only Best SEO theme ever. because for fast 2 years i used Thesis Theme. Read my blog post Best Wordpress SEO theme

    Reply
  • durga April 13, 2012, 6:49 PM

    Thanks. It worked for me well.

    Reply