Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Page & Category Menu Bars (http://forum.bytesforall.com/forumdisplay.php?f=10)

- - use image for menu (http://forum.bytesforall.com/showthread.php?t=15729)

use image for menu

I cannot figure out how to use my two images for the menu navigation.

I have one image I want to use as the background, and another I want to use as the hover and active page.

I am working on making a client's website using Wordpress. Currently, I just use static html.

I cannot figure out how to over ride the Atahualpa theme options for the menu. I have looked at other posts with some example CSS, but it just has not worked.

The current static website is http://www.mpbc-indy.org. I want the menu for the Atahualpa theme to look like this menu.

To do what you want I would...

Build your basic menu with the dark background
Determine the selectors (I use Firebug)
Apply the necessary CSS

You will be using a hover class and a current menu class.

If you aren't too familiar with CSS this will be a challenge and even with the CSS knowledge would take a bit of time to build.

If you get your site up and start the process perhaps we can help with hints but without the site up giving you more info than that is difficult.

Here is some code to give you an IDEA of how to proceed. You may have to use !important as shown for some code to override code that is there. I added a height to the menu as a whole because when you hover it would push down whatever is under the menu if you didn't give it that room. The padding is so the words move down on hover. The colors and dimensions are of course arbitrary.

HTML Code:

#rmenu2 li a:hover {

    background: black !important;

    height: 30px;

    color: white !important;

    padding-top: 40px !important;

}

#rmenu2 {

    height: 130px;

}

If it helps, I can post my CSS for the menu on http://www.mpbc-indy.org.

#menu { margin-top:35px; height:78px;}
#menu li { float:left; margin-right:1px}
#menu li a{ display:block;font-size:16px; color:#fff; text-transform:uppercase; background:url(images/menu.jpg) top repeat-x; padding:0 28px; line-height:46px; text-decoration:none}
#menu li a:hover, #menu #menu_active a{ background:url(images/menu_Aactive.jpg) top repeat-x; line-height:78px;}

I will try and work with the example you gave me. If the CSS above helps, all the better. Thanks in advance.

Without seeing the site all is just guessing. It comes down to having a background image for a and a:hover and then using CSS to style it as you want.