Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Page & Category Menu Bars »

Making Page Menu Bar transparent?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Nov 18, 2009, 11:13 AM
Hedgie
 
1 posts · Nov 2009
Making Page Menu Bar transparent?

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:

HTML Code:
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!
  #2  
Old Nov 18, 2009, 12:40 PM
juggledad's Avatar
juggledad
 
21,945 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
try
HTML Code:
div#menu1 ul.rMenu {
background:transparent;
}
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #3  
Old Nov 27, 2009, 02:33 PM
Memento Vivi's Avatar
Memento Vivi
 
8 posts · May 2009
Curacao
To make the border disappear:

div#menu1 ul.rMenu {
background:transparent;
border-bottom:transparent;
border-top:transparent;
}
  #4  
Old Jan 27, 2011, 09:25 AM
harpek
 
32 posts · Jun 2009
I found that this does the trick to make the entire menu bar transparent, pasted right into ATO > Add HTML/CSS Inserts:

Code:
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;
}
  #5  
Old Jan 30, 2011, 05:02 AM
jochemvreeke
 
13 posts · Jan 2011
Hi!

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

Code:
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;
}
  #6  
Old Jul 6, 2013, 11:04 AM
tad1073's Avatar
tad1073
 
19 posts · Jun 2013
Powder Springs, Ga
Send a message via Skype™ to tad1073
This may help someone, transparent menu with semi-transparent drop-down menu and social buttons in header.
Code:
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;}

Last edited by tad1073; Jul 8, 2013 at 04:27 PM.
  #7  
Old May 18, 2014, 02:20 PM
windhover4's Avatar
windhover4
 
98 posts · May 2010
Fort Lauderdale
Quote:
Originally Posted by juggledad
try
HTML Code:
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.

Last edited by windhover4; May 18, 2014 at 02:34 PM.
  #8  
Old May 18, 2014, 07:08 PM
lmilesw's Avatar
lmilesw
 
10,047 posts · Jul 2009
Central New York State USA
I played a bit with Firebug and came up with this possibility.
HTML Code:
#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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old May 18, 2014, 07:33 PM
windhover4's Avatar
windhover4
 
98 posts · May 2010
Fort Lauderdale
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?

Last edited by windhover4; May 18, 2014 at 08:08 PM.
  #10  
Old May 19, 2014, 04:38 AM
juggledad's Avatar
juggledad
 
21,945 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
Try this
HTML Code:
div#menu1 ul.rMenu {
	background-color: transparent;
	}
	
div#menu1 ul.rMenu li {
	background-color: transparent;	
	}
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support

Bookmarks

Tags
page menu background, transparent

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Atahualpa Page Menu Bar -> BFA Page Menu Bar? bhannemann Page & Category Menu Bars 16 Feb 21, 2011 04:49 AM
[SOLVED] Change Current Menu Item's Background to Transparent rnimchuk Header configuration & styling 2 Sep 15, 2009 05:12 AM
[SOLVED] Transparent page menu - none of the threads work for me.. maguai Page & Category Menu Bars 1 Jul 27, 2009 11:04 AM
Transparent Menu Item Instead of A Background Color oz1 Page & Category Menu Bars 1 Jun 29, 2009 05:19 AM
Making menu bar links shorter gesman Page & Category Menu Bars 2 Feb 8, 2009 08:52 PM


All times are GMT -6. The time now is 02:00 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.