Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   Transparent menu bar (http://forum.bytesforall.com/showthread.php?t=18437)

Björn Palovaara Sep 21, 2012 03:59 AM

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

lmilesw Sep 21, 2012 06:53 AM

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.

riw777 Apr 11, 2013 06:19 AM

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

lmilesw Apr 11, 2013 07:04 AM

ul.rMenu li would work but the submenus would need to have backgrounds added because of the cascading effect.

riw777 Apr 11, 2013 06:47 PM

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

lmilesw Apr 11, 2013 09:02 PM

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.

riw777 Apr 15, 2013 01:24 PM

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

riw777 Apr 15, 2013 03:48 PM

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

peterf Dec 7, 2013 08:03 PM

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?


All times are GMT -6. The time now is 11:58 PM.

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