Hi

I want the menu bar background to be partially transparent. I have no clue about how to write a code for this and were to put it.

Also - how and were can I add a background image in menu bar?

Kind regard!
Björn

You would use a tool like Firebug to determine the element you want to add a background image to and use CSS to add the image. To make it partially transparent I would just create a partially transparent png and repeat it.

I have the image in the background of the menu, but I can't figure how to get the background image to "show through" the menu... This is what I have in my css inserts so far, but it's not making the background image "show through" the menu:

#bfa_page_menu {
background-color: transparent !important;
border: #2C292B !important;
}

div#menu1 {
border: #000000;
background-color: transparent;
border:0 !important;
}

#bfa_page_menu div#menu1 {
border: solid 1px; #000000;
}

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 12px 27px !important;
}

div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {
padding: 12px 27px !important;
}

div#menu1.menu-frontpage-container {
border: solid 1px #transparent; !important;
background-color: #transparent; !important;
}

ul.rMenu {
background-image: url('http://sts.shepherds.edu/wp-content/gallery/admin/2013-04-11-banner-top.jpg') !important;
}

Any ideas?

sts.shepherds.edu is what I'm working on.

Thanks!

Russ

ul.rMenu li would work but the submenus would need to have backgrounds added because of the cascading effect.

Okay --thanks... I don't know how to select for the drop down menu, since they all seem to be the same class (only nested one inside the other)? Is there a way to select for just the dropdowns?

Thanks!

Russ

This is where "playing" with Firebug comes in. I just took a look and there is the rMenu-ver and sub-menu classes that you can use along with perhaps li and you may need an !important. For the hover state you would use li:hover.

To get partial transparency you will need to use a semi-transparent png or rgba CSS.