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 »

working page menu bar with background image, image on hover, transparent link state


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 1, 2011, 03:39 PM
cway
 
154 posts · Jul 2009
I don't know if this would help anybody or not but I thought I would post a Page menu that seems to be working for me. I have a background image behind the entire menu. When you mouse-over a link, an image is loaded. When you're on a page, that page's link also has a background image. When you're not over a link, the link is transparent.

This menu is working on http://www.tribu2.com/ as of November 1, 2011.

I do not know css very well, so I don't know if this coding needs work or could be improved.

Code:
ul.rMenu {
	padding:0 !important;
	margin:0 !important;
	list-style:none !important;
	border:0 !important;
}
ul.rMenu li { 
	margin:0 !important;
	padding:0px 0px 0 0 !important;
	border:0 !important;
}
ul.rMenu li a { 
	margin:0 !important;
	padding: 14px 12px !important;
	color:#333 !important;
	font:normal 14px Arial, Helvetica, sans-serif !important;
	text-decoration:none !important;
	border: solid 0px #FFFFFF;
}

div#menu1 ul.rMenu li {
    background-color: transparent;
}
div#menu1 ul.rMenu {
    background-color: transparent;
}
div#menu1 ul.rMenu li:hover > a,
	ul.rMenu li a:hover {
	color:#000 !important;
	border: solid 0px #FFFFFF;
	background-image: URL(http://www.tribu2.com/images/navbar-background.gif) !important;
}
ul.rMenu li.current_page_item a {
	color: #000 !important;
	background-image: URL(http://www.tribu2.com/images/navbar-background.gif) !important;

}

#menu1 {
	width: 990px !important;
	margin: 0px;
}

div#menu1 {
	border-top: 0px solid #513154;
	border-bottom: 0px solid #513154;
	border-right: 0px solid #513154;
	border-left: 0px solid #513154;
	background-image: URL(http://www.tribu2.com/images/navbar-background2.gif) !important;
}
  #2  
Old Nov 1, 2011, 04:06 PM
lmilesw's Avatar
lmilesw
 
10,110 posts · Jul 2009
Central New York State USA
Very nice... The only coding things I see are that you probably don't need.
border: solid 0px #FFFFFF; or border:0 !important;
Instead if you want no borders use border: none; or perhaps border: none !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

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Menu Transparent Background - not working after fix shadowoflight Page & Category Menu Bars 5 Mar 27, 2011 06:26 AM
[SOLVED] Background color:hover not working for 'category' items in menu 1 (page menu akg Center area post/pages 4 Sep 27, 2010 09:08 AM
Background color does not change for menu items in current state cfibanez Page & Category Menu Bars 4 Sep 2, 2010 12:18 PM
Page Menu Background & Hover Image how to do this... ssoszka Atahualpa 3 Wordpress theme 11 Feb 18, 2010 12:19 PM
Background Image for Page buttons no longer working willsy Page & Category Menu Bars 0 Sep 10, 2009 08:49 PM


All times are GMT -6. The time now is 10:13 PM.


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