Learn Thesis Theme Fast to Build Unique and Beautiful Websites

Thesis Designer Guide is the fastest way to learn the Thesis framework.
A step-by-step guide walks you through all the essential things you need to know to become a Thesis design expert.
You don’t need to be a programmer to learn Thesis design.
The complete Thesis Designer Guide covers all the coding basics and tools needed to become a Thesis expert.

Home > Thesis Theme Tutorials > Thesis Theme Customization > How to add Background Image in Thesis Theme Navigation Menu

How to add Background Image in Thesis Theme Navigation Menu

by Suresh in How To,Thesis Theme Customization

In this video tutorial I am going to explain about how to add background image in thesis theme navigation menu. By default thesis navigation menu is in unfinished form in order to make finished we need to add background color or image. I have previously explained that how to add background color in navigation menu.

Here we are seeing about how to add image in nav menu. There are number of ways available to choose perfect image to the navigation, in other words you can use singe image in rectangular size to the navigation menu or you can use bit of images to fix in navigation menu with perfect background image.

To do this first you need to remove the default navigation menu by adding the following code in custom_functions.php file.

/*remove deafult thesis navigation*/
remove_action('thesis_hook_before_header',  'thesis_nav_menu');

default navigation

Once you have removed the nav menu you need to add custom nav menu by adding the below code in the same custom_function.php.

//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 class="nav_container">';
thesis_nav_menu(); //this is default navigation

echo '</div>';
echo '</div>';
echo '</div>';

}

In the above code I have add two <div>. One is to add background image and another one is to style your custom nav. To paste the above code in custom_function.php. Login your wordpress admin. Choose ‘custom file editor’ under thesis options in left sidebar of the wordpress dashboard. Select custom_function.php file and click on edit selected file. Paste the above code and save it.

The above two codes is for navigation menu above header. If you have nav menu below header the above code you should replace the hook functions (after header) like below code.

remove_action('thesis_hook_after_header', 'thesis_nav_menu');

add_action('thesis_hook_after_header', 'custom_nav');

Now upload your navigation background image to the custom images folder by using ftp.

The path of custom folder is public_html/fourblogger.com/wp_content/theme/thesis_16/cusom/images/.

Inside image folder you have to upload the image file.

Once you uploaded the image file. Copy and paste the below code in custom.css file which is available in the wordpress admin.

/* paste in custom.css file ****/
.custom #nav2{

background:url("http://adwordsshop.com/wp-content/themes/thesis_16/custom/images/menu_part2.png");
width:950px;
height:100px;
padding-left:0;
float:left;
}
.custom .nav_container{
padding:2.5em 0 0 0;
font-weight:bold;
margin-top:0.9em;

}

.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; }

The above custom.css code you should change background url as your image uploaded path.

Also you may change the height of your nav menu.

To paste the code, Choose ‘custom file editor’ under thesis options in left sidebar of the wordpress dashboard. Select custom.css file and click on edit selected file.

Paste the above code and save it. And visit your site.

To change your previous navigation menu background color and link color if you had in nav menu. Go to ‘design options’ under ‘thesis options’ in your wordpress admin dashboard. Select nav menu and do the corresponding changes.