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:
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..
{ 13 comments… read them below or add one }
thanks for your kind words
I didn’t knew that thesis is too easy to customizable. Now this blog help me to realize.
Thanks Tanmoy. We have try to do our best to users who customize thesis.
This blog is best as it contains video.
If you like our video tutorials, don’t forget to subscribe in our youtube channel here. http://www.youtube.com/fourblogger
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?
hai,
I saw your site your header image is placed above the navigation menu. I think there is no problem for you…
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
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;}
Is there any seo freindly theme other then thesis …..?
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
Thanks. It worked for me well.
thanks for this advice …i like it and i use it