Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

transparent menu bar

Old Sep 15, 2010, 07:26 PM
kalexn's Avatar
18 posts · Jul 2010
Nashville, Tennessee
Okay, so I have been search & reading & trying everything for the past hour regarding making my menu bar transparent. I used a post that juggledad (I think) had made mentioning adding code to your css/html (and it had all weird colors in it and changing it. Well, I changed them all to transparent and they are white.

I am going to include all of the code I have in my css. My site is here: http://www.ladybug-blessings.com

I want to be able to see the stripped background through for the menu bar. Thanks!

td#header {
padding-bottom: 15px;
/* removing the padding here and putting them on the sidebars instead. That way the middle column aligns nicely with the header when there are no sidebars */
td#middle {
padding: 0;
div.searchbox-form {
margin: 5px 0 15px 5px;
div#menu1 ul.rMenu {
background: transparent;
border: none;

div.widget ul li {
padding: 1px 5px 1px 12px !important;
background: url('<?php bloginfo('template_directory'); ?>/images/bullets/round-gray.gif') no-repeat 0 7px;
/* Adjustments for the menu bars, which in their default
state have 1px borders plus -1px margins to avoid 1+1=2px
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; }
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0xp; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 6px 10px;
/* Space between items of page menu bar */
div#menu1 ul.rMenu li {
margin-right: 5px;
/* Reset margin for 2nd+ level items */
div#menu1 ul.rMenu li li {
margin-right: 0;
/* round corners for page menu bar items */
div#menu1 ul.rMenu li, div#menu1 ul.rMenu li a {
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
/* reset 2nd+ level */
div#menu1 ul.rMenu li li, div#menu1 ul.rMenu li li a {
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
background:transparent !important;

div#menu1 {
div#menu2 {

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 40px;
background: transparent;
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: transparent;
border: none 0px;
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
background: transparent !important;
color: #000000 !important;
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
Ladybug Blessings
Old Sep 16, 2010, 04:17 AM
juggledad's Avatar
23,742 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
It is transparent, but you are seeing the white that you set for the container. Think pf the page as layers of images one on top of the other. you set the bottom layer (the background) to have the stripes. Then over that is the wrapper, then comes the container then the menu is layed on top of that. At ATO->Style & configure LAYOUT->Layout Container Style you have 'background: #FFF:' if you change that to 'transparent' you will now see the stripes thru it.

However, you will see the stripes thru any of the areas that are layed on the container that don't have a background color set for them, the sidebars, the center area. So you will have to go thru the options aand style thesidebars with a background same thing for the center column
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Old Sep 16, 2010, 07:37 AM
26 posts · Nov 2009
I have a very similar problem.

I have now found out how to make a transparant bg on my Page Menu so you can see the bg-image through.

But on hover the bg changes to black - I want to have it transparent so that ONLY the titles change color!

Should I change this in CSS Inserts or.... and what line?

My site: www.haircenter.dk/wordpress

Thanks a million....


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Making Page Menu Bar transparent? Hedgie Page & Category Menu Bars 10 May 19, 2014 06:28 AM
Transparent Page Menu Bar Stingraynut Page & Category Menu Bars 3 Apr 5, 2010 06:43 PM
Transparent GIF images in main page body not transparent donfos001 Center area post/pages 2 Jan 10, 2010 09:14 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

All times are GMT -6. The time now is 08:40 PM.

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