How to add Background Image in Thesis theme Navigation Menu header

This post is little special because with this post I will start video blogging with textual version too. In this tutorial i will explain you about How to add Background image in thesis theme navigation menu at header. I had already covered few tutorials on Thesis Nav in our Thesis Customization category.
Default Thesis navigation without any image looks like thisNow let’s start to add image in thesis nav menu. It is very necessary to choose perfect image for your nav menu because you are adding image to give special effect to your menu so it needs to be well. You need to have image having special effect and larger width.
To add image in thesis nav firstly we need to remove default thesis navigation menu. For that we need to add action in custom functions.php file, copy the code from below and paste it in custom functions.php to remove default thesis navigation menu.
To add code, login to your WordPress dashboard than go to custom file editor under thesis tab from dashboard sidebar than choose custom functions.php file to edit . I will recommend you using any FTP client for dealing with custom functions.php.
/*remove deafult thesis navigation*/ remove_action(‘thesis_hook_before_header’,  ‘thesis_nav_menu’);After removing default navigation menu, we need to add another navigation menu with some more functionality. Copy and paste the code for custom functions.php to add new thesis navigation menu.
//place my custom nav above the header add_action(‘thesis_hook_before_header’, ‘custom_nav’);
function custom_nav() {
echo ‘<div id=”nav”>’;
echo ‘<div id=”nav2″>’;
echo ‘<div>’; thesis_nav_menu(); //this is default navigation
echo ‘</div>’; echo ‘</div>’; echo ‘</div>’;
};
Now just we need to add image with some more styling for that copy and paste below in custom.css for styling your  nav menu
/* paste in custom.css file */ .custom #nav2{ background:url(“http://gotricky.com/Raj-Sharma/wp-content/themes/thesis_18/custom/images/nav_bar.jpg”); width:950px; height:50x; padding-left:0; float:left; } .custom .nav_container{ padding:0 0 0 0; font-weight:italic; margin-top:0.0em; } .custom .menu li{ border:1px solid #444; -moz-border-radius:3px; } .custom .menu { background-color: none;} .custom .menu ul li{ width:21.9em; } .custom .menu li a{ font-size:1.2em; }
Finlay you have your own New thesis navigation menu with background image. Don’t forget to replace your image link from the above code with your own image.