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 »

Transparent menu bar


  #1  
Old Sep 21, 2012, 03:59 AM
Björn Palovaara's Avatar
Björn Palovaara
 
12 posts · Apr 2010
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
  #2  
Old Sep 21, 2012, 06:53 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #3  
Old Apr 11, 2013, 06:19 AM
riw777
 
33 posts · Jun 2009
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

Last edited by riw777; Apr 11, 2013 at 06:24 AM.
  #4  
Old Apr 11, 2013, 07:04 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
ul.rMenu li would work but the submenus would need to have backgrounds added because of the cascading effect.
__________________
~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.
  #5  
Old Apr 11, 2013, 06:47 PM
riw777
 
33 posts · Jun 2009
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
  #6  
Old Apr 11, 2013, 09:02 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
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.
__________________
~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.
  #7  
Old Apr 15, 2013, 01:24 PM
riw777
 
33 posts · Jun 2009
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
  #8  
Old Apr 15, 2013, 03:48 PM
riw777
 
33 posts · Jun 2009
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

Last edited by riw777; Apr 15, 2013 at 03:52 PM.
  #9  
Old Dec 7, 2013, 08:03 PM
peterf
 
18 posts · Apr 2009
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?

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Set Menu Buttons Transparent Ber|Art Page & Category Menu Bars 5 Sep 22, 2011 08:09 AM
transparent menu bar kalexn Page & Category Menu Bars 2 Sep 16, 2010 07:37 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


All times are GMT -6. The time now is 10:33 AM.


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