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 » Header configuration & styling »

[SOLVED] Page Menu Nav with background images, need css help


  #1  
Old Mar 16, 2010, 10:52 PM
blueprairie
 
98 posts · Feb 2009
I'm working on a site and *almost* have the navigation working the way I want. I'm obviously missing a couple things in my css but I can't seem to see it.

Demo site: http://polkcity.server307.com

On the site, the Hover and the Current Page seem to be working correctly. (Small caps, centered horizontally and vertically, hover graphic displaying)

However, the other states are not pulling the custom CSS inserts. (see below)

1. What do I need to change to make my non-hover, non-current page links format as small caps, centered horizontally and vertically, either with or without a background graphic?

2. There is a strange overlap from the menu onto the logo, seen as approx 20px of dark green. How do I remove that? I'm guessing it has something to do with having dark green loaded on ATA Page Menu Bar background, mainly because I couldn't figure out how to load nothing in that space.

3. Suggestions on how to center the background image when in hover and current page state? Either with CSS or possibly by making the graphic bigger and forcing set, uniform widths on each cell...

4. I'd hoped to format the drop down child-portion of the menu as standard ATA, no extra CSS. Advice on how to get the custom CSS off of these?

And, thank you JuggleDad and the ATA community, I couldn't have gotten this far without your help on the following posts:

http://forum.bytesforall.com/showthread.php?t=4697
http://forum.bytesforall.com/showthread.php?t=5814
http://forum.bytesforall.com/showthread.php?t=6015


Current CSS Insert
/* ================================================== */
/* Menu item */
/* ================================================== */
div#menu1 {
height: 54px;
margin-top:0px;
}

div#menu1 ul.rMenu li a:link {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
}

div#menu1 ul.rMenu li a:active {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
}

div#menu1 ul.rMenu li a:hover {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
background: url(http://polkcity.server307.com/wp-con.../menuhover.jpg) no-repeat !important;
}

div#menu1 ul.rMenu li.current_page_item a:visited {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
font-variant:small-caps;
-x-system-font:none;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
background: url(http://polkcity.server307.com/wp-con.../menuhover.jpg) no-repeat !important;
}

Last edited by juggledad; Mar 17, 2010 at 07:15 AM.
  #2  
Old Mar 17, 2010, 07:16 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

If you combine the CSS Selectors you should be able to replace that entire css wth this
{HTML]div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:active {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
}

div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1 ul.rMenu li a:hover {
background: url(http://polkcity.server307.com/wp-con.../menuhover.jpg) no-repeat !important;
}[/html]
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 17, 2010 at 07:25 AM.
  #3  
Old Mar 17, 2010, 03:34 PM
blueprairie
 
98 posts · Feb 2009
Thanks for the info on the order, didn't know that. However, making that alteration (in my own code or using yours) doesn't change anything in my page display. Any other suggestions on that, or on any of the other questions posted?

Thank you!
-Kimberly
  #4  
Old Mar 19, 2010, 06:53 AM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
it looks like you have this working??
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Nov 25, 2010, 08:36 PM
IldiW
 
39 posts · Oct 2010
NZ
Jdad, thanks to your CSS from the earlier post, I've worked out that this

div#menu1 ul.rMenu li.current_page_item a:visited {
background: #fff !important;}

would change the active tab which is great if I have a single level navigation.
Could you help me with a double navigation for the same issue? I would like to have white for both the active parent tab and the active child tab if this makes sense. At the moment only the actual active page's tab gets to be white be it parent or child.
Many thanks,
Ildi
  #6  
Old Nov 25, 2010, 09:14 PM
juggledad's Avatar
juggledad
 
23,682 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Go to a page that is a child then look at the source of the page. You should see a class for the parent like ancestor or parent (using my iPad and can't look it up). Using that, you can build an additional CSS selector for your rule
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Nov 26, 2010, 12:39 AM
IldiW
 
39 posts · Oct 2010
NZ
Yay, this worked:

div#menu1 ul.rMenu li.current_page_parent a:visited {
background: #fff!important;}

Thank you!!

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Active page menu background image css help dixieprosser Page & Category Menu Bars 1 Mar 18, 2010 02:13 PM
[SOLVED] jpg background image for nav menu not showing up in IE7 rinoa3108 Page & Category Menu Bars 4 Dec 29, 2009 08:43 PM
IE ruins aligned images in header & center column, & doesn't size nav menu buttons viewdesigninc Header configuration & styling 0 Dec 11, 2009 02:07 PM
[SOLVED] Help with background images in top menu Poet Page & Category Menu Bars 0 Sep 14, 2009 12:18 AM
How to use background images for menu items instead of text daxryan Page & Category Menu Bars 2 Feb 27, 2009 05:29 PM


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


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