How to add Background Image in Thesis Theme Navigation Menu

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

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.

navigation with  image

nav menu with image

Now check your site navigation menu with background image. For more checkout our all Thesis theme tutorials..

P.S  Do you want thesis theme customization use our service page or contact from with your quotes.

{ 28 comments… add one }

Leave a Comment

  • Jaydip Parikh January 5, 2010, 10:56 AM

    Hi, Images will make your blog bit slow loading. I will advise you to go with Background color not Image.

    Reply
    • Pascal January 5, 2010, 12:13 PM

      Thanks Jaydip.

      Reply
    • Bear May 28, 2011, 12:52 PM

      Wow, that’s a really clever way of tnihikng about it!

      Reply
  • Norman April 14, 2010, 11:42 PM

    Hi Pascal,

    This was the lesson I was referring to. I accidentally posted in the other lesson.

    I’ve been having a very difficult time executing this lesson. I can’t get the background image to show up in my navigation bar.

    I followed the instructions above, just modifying it for the location of the image.

    when I do put in the image, the nav bar gets distorted and the image doesn’t show up.

    If you could look at my site again in this regard, I would appreciate it.

    Norman

    Reply
    • Suresh April 15, 2010, 8:10 PM

      hai,

      I saw your site you have added the background image in nav menu.. (navbar3.gif). Is there any problem..

      Reply
  • Norman April 14, 2010, 11:46 PM

    P.S.
    Should I delete the code from the previous lesson I did, the code to put the nav bar below the header image, and then use this code?

    Reply
    • Suresh April 15, 2010, 8:15 PM

      hai,

      yes you should delete the previous code..

      Reply
  • Norman April 15, 2010, 4:12 AM

    Hi Pascal,

    Can you take a look at my site and tell me what I did wrong? the thesis nav bar and the custom nav bar are on top of each other rather than overlapping. How can I fix this?

    Norman

    Reply
    • Suresh April 15, 2010, 8:19 PM

      hai,
      do you want both nav menu on top?
      if yes, dont remove thesis nave menu.. that is this post we have mentioned remove action code. dont use this code both nav menu will appear..

      Reply
  • Melissa April 24, 2010, 9:56 PM

    I’ve tried many codes from your PDF file, and they all worked. Except for this one :c… the picture won’t show up on my navbar… I made sure the filename in my cPanel file manager is the same as the file name specified in the code. I also adjusted the height, and the width.
    The black borders showed up on my navbar :) but the bg picture doesn’t :c

    Reply
    • Suresh April 25, 2010, 10:19 AM

      hai Melissa,

      I checked your site.
      You placed the image uploaded path as '/images/navbarbg.png' in custom.css . If you give like that It will take full path as

      http://www.aboutthingsilike.com/images/navbarbg.png. I checked there is no image in this path.

      so You should give the full image uploaded path like: http://www.aboutthingsilike.com/wp-content/themes/thesis/custom/images/navbarbg.png (this is not exact path give your nav background image uploaded path.) It will work..

      Reply
      • Melissa April 25, 2010, 3:21 PM

        You are BRILLIANT!!
        Thanks so much Suresh! Ü

        Reply
        • Melissa April 25, 2010, 3:44 PM

          You know, when I finally got the image to show up, I realized that my RSS subscribe “button” was transparent. And since I wondered so much how you knew the path and the name of my bg image, I checked my Google Chrome developer tool. This led me to check every element listed there, and you know what, I discovered how to make my whole page transparent. I spent DAYS trying to figure that out, and the “opacity” property wasn’t working, and I gave up. So, you indirectly helped me with that too! I’m so grateful. Thanks again, Suresh Ü

          Reply
        • Suresh April 26, 2010, 2:22 PM

          hai melissa,

          you can get mote thesis theme tutorials in our youtube channel

          Reply
  • Cheri Peoples June 23, 2010, 11:10 PM

    My navigation bar is already under my header, is that why I am getting the error? If so what part of your code do I need to copy and paste?

    Cheri

    Reply
    • Suresh June 23, 2010, 11:29 PM

      hai Cheri,

      This is not because of your previous nav menu. The code will change the default navigation menu above header to below header and add new navigation above header.

      If you already have nav menu below header.. just remove first two lines add_action and remove_action..
      this will enough..
      If you have difficulty send your ftp username and password..

      Reply
  • shashank chinchli October 24, 2010, 6:34 AM

    I am unable to change wordpress menu in thesis theme.
    could u help me pleas?

    Reply
  • Tim November 18, 2010, 11:47 AM

    Great Tip Suresh – I was struggling as I needed a different background to the page content in 1.8. This has fixed the issue : )
    I got rid of a bit of the formatting stuff
    /* paste in custom.css file ****/
    .custom #nav2{
    background-image: url(http://www.mysite.com/assets/images/header/nav_background.png);
    }
    .custom .menu { background-color: none;}

    Reply
  • David Henderson December 4, 2010, 6:02 AM

    Cool stuff Suresh,
    How can I use an image as a nav menu button. Such as a vista-buttons created image?
    many thanks

    Reply
  • Oren December 18, 2010, 12:29 AM

    Hey Suresh.
    is there a way to add a different image to each tab ?
    thanks

    Reply
  • colehaankindlecover January 22, 2011, 2:30 PM

    does image background make our blog load slowly than without image bg on it?

    it’s very cool with image bg but my issue is during loading website

    Reply
  • Ronald Redito February 24, 2011, 8:40 PM

    Nice Thesis tutorials you have here. I am customized three sites using Thesis and I really need these videos. Thank you.

    Reply
  • Kakashi3000 March 23, 2011, 10:36 PM

    How do i create my own custom navigation bar and what would be the sizes for it.

    Reply
  • H. Wood September 27, 2011, 7:37 PM

    Hello – This has worked great for me on many sites, but I recently noticed drop down items are not selectable in IE8 (and probably earlier versions). Any ideas?

    Thank you!!

    Reply
  • Pantho Bihosh January 3, 2012, 7:13 AM

    Its doesn’t work in my site… I think you need to change your code. Thank you.

    Reply
  • Carson Ward February 14, 2012, 9:57 AM

    Hi there,

    There is a much easier way to do this. Something like this will work great in custom.css

    .custom ul.menu{
    background: url(“images/nav-bg.png”) repeat-x;
    height: 36px;
    }

    Reply
  • Liz February 22, 2012, 10:10 PM

    Hi Suresh, any idea how to align the nav menu to the right when using the full width HTML framework?

    Reply