Transparent menu bar
 

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.

Ugh --I didn't see the difference between rmenu and menu when I was looking at firebug. Thanks --I'll try that and post here in case anyone else is ever looking for a way to do this.

Thanks!

:-)

Russ

I went back and tried again --and I note this:

li.rMenu-expand {
background-color: transparent !important;
}

Makes _just_ the main menu bar transparent, and doesn't impact the sub-menus at all. So that fixes my problem (almost --I have to figure the search box out now, but it's just a matter of finding the right class).

So if anyone wants their main menu bar to be transparent, and not the submenus that pull out on hover, use the above in css-inserts.

:-)

Russ

I went back and tried again --and I note this:

li.rMenu-expand {
background-color: transparent !important;
}

Putting just the code in the previous post in the CSS inserts didn't work for me (i.e., the top-level menu is not transparent). Is there something additional before the li.rMenu-expand?