Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

Making Page Menu Bar transparent?


  #1  
Old Nov 18, 2009, 11:13 AM
Hedgie
 
1 posts · Nov 2009
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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try
HTML Code:
div#menu1 ul.rMenu {
background:transparent;
}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Nov 27, 2009, 02:33 PM
Memento Vivi's Avatar
Memento Vivi
 
9 posts · May 2009
Breda // The Netherlands
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
 
102 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,176 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
 
102 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
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Try this
HTML Code:
div#menu1 ul.rMenu {
	background-color: transparent;
	}
	
div#menu1 ul.rMenu li {
	background-color: transparent;	
	}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old May 19, 2014, 06:28 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
You might need to add !important and you could combine them like
HTML Code:
div#menu1 ul.rMenu, div#menu1 ul.rMenu li {
    background-color: transparent !important;
}
__________________
~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.

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:53 AM.


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