Custom buttons to replace the main menu bar
 

Hello, I'm looking to replace the entire menu bar (www.chocolateatime.com - the menu bar right below the header image) with my own buttons that I created in Photoshop. For example, I created a 'Running' button in Photoshop (saved as a JPEG) and I would like to place it right below the header image (along with other buttons). The user can then click on the button image and will be taken to the 'Running' page. I'm not good with CSS or HTML code so detailed help would be much appreciated!

I would use the WordPress menu builder and give each button a class. If you don't see the class box on the menu items click on Screen Options and check the appropriate box.

Then use CSS to give each button a background image and size them accordingly.

Thanks for getting back to me! So I followed your instructions but am not sure how I should get the button images to appear on the screen. I need to remove the pink menu bar below the header image and replace all those menus with five images that link out to the menus. I think I created the CSS Classes but am now lost. I apologize in advance - I'm a newbie!

Since you now have the classes assigned you need to put the proper CSS in the CSS Inserts section of the theme options. For your Who am I? menu it would be something like the following.
Since your classes have upper and lower case letters you need to make sure to have those correct. Also you may need to add !important as I did in the example.

For more info on sizing and positioning background images check out w3schools.com