I've searched the forums on How to Make The Page Menu Bar Transparent and saw several ask the same question, but none of the solutions worked. I've tried entering the following into CSS Inserts:

ul.rMenu {
background: none;
border: none;
}

ul.rMenu {
background: transparent;
border: none;
} 

ul.rMenu {
background: none;
border: none;
}

ul#rmenu2 {
background: transparent;
} 

ul#rmenu2 {
background: none;
} 


ul#rmenu1 {
background: transparent;
} 

ul#rmenu1 {
background: none;
} 

None of these achieve the transparent background. You can see the issue here: gofastweightloss.com

Any help is appreciated. The theme is fabulous by the way!

try

div#menu1 ul.rMenu {
background:transparent;
}

To make the border disappear:

div#menu1 ul.rMenu {
background:transparent;
border-bottom:transparent;
border-top:transparent;
}

I found that this does the trick to make the entire menu bar transparent, pasted right into ATO > Add HTML/CSS Inserts:

div#menu1 ul.rMenu {
	background:transparent;
	border-bottom:transparent;
	border-top:transparent;
}
ul.rMenu li a:link, ul.rMenu li a:active,
ul.rMenu li a:visited, ul.rMenu li {
	background: transparent !important;
}
ul.rMenu li a:hover {
	background: transparent !important;
}

Hi!

my first comment!! I found that this does work for me since i wanted to keep the text links full color:

div#menu1 ul.rMenu {
	background-color: rgba(255,255,255,0.65);
}

ul.rMenu li a:link, ul.rMenu li a:active,
ul.rMenu li a:visited, ul.rMenu li {
	background: transparent !important;
}

ul.rMenu li a:hover {
	background: transparent !important;
}

This may help someone, transparent menu with semi-transparent drop-down menu and social buttons in header.

div#menu1 ul.rMenu {
background:transparent;
border-bottom:transparent;
border-top:transparent;

}
ul.rMenu li a:link, ul.rMenu li a:active,
ul.rMenu li a:visited, ul.rMenu li {
background: transparent !important;
}
ul.rMenu li a:hover {
background: transparent !important;
}

.sub-menu {
background: #333333 !important;
filter: alpha(opacity=95);
-moz-opacity:.95;
opacity:.95;
}

.sub-menu a:visited {
color: #ffffff !important;
}

.sub-menu a:hover {
color: #36adf0 !important;
}

.sub-menu a:link {
color: #ffffff !important;
}

#header_image_sociable {
position: absolute;
left:0px;
top: 91px;
width: 333px;
height: 37px;
background: #333333;
#border-top: solid 1px #dddddd;
border-right: solid 1px #dddddd;
border-bottom: solid 1px #dddddd;
filter: alpha(opacity=80);
-moz-opacity:.80;
opacity:.80;
#-moz-border-radius: 2px;
#-khtml-border-radius: 2px;
#-webkit-border-radius: 2px;
#border-radius: 2px;
}
#header_image_sociable ul {list-style-type: none;}

Originally Posted by juggledad

try

div#menu1 ul.rMenu {
background:transparent;
}

This no longer seems to work. Ageless Question, how to make Menu Bar Transparent?

Simple little site needs transparent menu bar: http://jFernandezart.com

Thanks.

I played a bit with Firebug and came up with this possibility.

#bfa_page_menu .menu-item, #bfa_page_menu a, #menu1 {
    background: transparent !important;
    border: none !important;
    font-size: 1em !important;
}

I added the font size attribute as it seemed like the text in the menu was a bit small.

Thanks so much. I added that to BFA HTML/CSS Inserts and it seems to be the same.

----------------------------
Last Edit PPS: I adjusted the background color and it is passable now. Thanks so very much. If using a solid background color, this is the FIX!

Edited PS: However, having looked at it further, your fix did eliminate the annoying vertical dotted lines at each end of the Menu Bar. The disparity comes from the color that I have entered, which does not match the background...which is an image.

So if the background were a solid color...your fix worked!

Can I insert an image into the background of the Menu Bar...a screen shot from just below the existing Menu...that would follow the gradations of the background image from left to right?

Try this

div#menu1 ul.rMenu {
	background-color: transparent;
	}
	
div#menu1 ul.rMenu li {
	background-color: transparent;	
	}

You might need to add !important and you could combine them like

div#menu1 ul.rMenu, div#menu1 ul.rMenu li {
    background-color: transparent !important;
}