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 »

Highligh parent and child navigation menu when active or current


  #1  
Old Oct 27, 2012, 06:28 PM
etask
 
3 posts · Oct 2012
Would someone show me how to highlight parent and child navigation menu when active or current. Thank you.


#menu {
font-weight:700;
list-style:none;
width:990px;
margin:0px auto 0px auto;
height:29px;
padding:0px 0px 0px 0px;

/* Rounded Corners */

-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;

/* Background color and gradients */

background: #014464;
background: -moz-linear-gradient(top, #, #);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#), to(#));

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;
-webkit-box-shadow:inset 0px 0px 1px #edf9ff;
box-shadow:inset 0px 0px 1px #edf9ff;
}

#menu li {
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 5px 4px 5px;
margin-right:0px;
margin-top:0px;
border:none;
z-index: 1;
}

#menu li:hover {
border: 1px solid #777777;
padding: 2px 4px 4px 4px;

/* Background color and gradients */

background: #F4F4F4;
background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
}

#menu li a {
font-family:Arial Narrow;
font-size:15px;
color: #EEEEEE;
display:block;
outline:0;
text-decoration:none;
text-shadow: 0px 0px 0px #000;
}

#menu li:hover a {
color:#161616;
text-shadow: 0px 0px 0px #ffffff;
}
  #2  
Old Oct 27, 2012, 08:37 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I just play with Firebug to figure out these things virtually. In this case how about using
HTML Code:
.current_page_item a
as the selector?
__________________
~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 Oct 28, 2012, 03:42 AM
davidsteinmusic
 
13 posts · Sep 2010
Thanks lmilesw! Worked like a charm.

etask, i used the css lmilesw mentioned and just specified color. I don't have child menu, but hopefully this helps:

.current_page_item a {
background: #cccccc !important;
border: 1px solid #cccccc !important;
color: #787878 !important:
}
  #4  
Old Oct 28, 2012, 05:23 AM
davidsteinmusic
 
13 posts · Sep 2010
Atahualpa 3.7.9
WP 3.4.2
http://www.nodesignstein.com


Altho, using the .current_page_item a prevents the a: hover style from taking effect. Anyway around that? I'm thinking it's the !important in my css:

Quote:
.current_page_item a {
background: #cccccc !important;
border: 1px solid #cccccc !important;
color: #787878 !important:
}
If i remove the !important, however, it doesn't work.

Also, even after placing the css above, i'm still noticing a 1 pixel border around my 'active' state which seems to be inherited (?) from the "background color" option in ATO>MENU 1 (Page Menu). It's really only noticeable on the bottom of the 'active' menu bar item, but i'd like that menu bar item to 'bleed' right into the main body color.

I thought that placing !important; in a:hover state would override what is in the ATO>MENU 1 (Page Menu) options, but i can't seem to shake that 1 px. Argggg.

Thanks for the suggestions on this issue so far!

thoughts? attached is a pic of my issue and here's my css (via JDs cheat sheet):

Quote:

/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
margin-top:10px;
margin-left:20px;
}

/* ================================================ */
/* Page Menu item's background - just match w/ background and doesn't really effect things*/
/* ================================================ */
div#menu1 ul.rMenu {
border: 0px solid #fffffe;
background: #fffffe;
height: 29px;

}

/* ================================================ */
/* Page Menu item */
/* ================================================ */

ul.rMenu li a:link,
ul.rMenu li a:visited,
ul.rMenu li {

width: 90px !important;
line-height: 18px !important;
padding-right: 12px;
margin:0px 6px 0px 5px;
background: #dddddd;
border: 1px solid #dddddd;
text-align:center;

}
ul.rMenu li a:hover {
background: #aaaaaa !important;
border: 1px solid #aaaaaa !important;

}
ul.rMenu li a:active {
background: #cccccc !important;
border: 1px solid #cccccc !important;
color: #787878 !important:
}

#rmenu2 .current_page_item a {
background: #cccccc !important;
border: 1px solid #cccccc !important;
color: #787878 !important:
}

/* ================================================ */
/* 'Page' Center Column */
/* ================================================ */

tr#bodyrow {

background: #cccccc !important;
border: 1px solid #cccccc !important;
}
Attached Thumbnails
Click image for larger version

Name:	1.png
Views:	353
Size:	49.1 KB
ID:	2086  
  #5  
Old Oct 28, 2012, 12:49 PM
etask
 
3 posts · Oct 2012
You guys are so nice. Thank you very much for all your help.
  #6  
Old Oct 28, 2012, 12:59 PM
etask
 
3 posts · Oct 2012
I am working on another navigation menu and try to do the same thing. Any idea? Thanks.

CSS:

#nv { overflow: hidden; padding-left: 3px; height: 33px; {MENUBGCODE}; }
#nv li { float: left; padding-right: 1px; height: 33px; line-height: 33px; background: url({IMGDIR}/nv_a.png) no-repeat 100% 0; font-weight: 700; font-size: 14px; }
.ie_all #nv li { line-height: 36px; }
.ie6 #nv li { line-height: 33px; }
#nv li a { float: left; padding: 0 9px; height: 33px; }
#nv li a { color: {MENUTEXT}; }
#nv li span { display: none; }
#nv li.a { margin-left: -1px; {MENUHOVERBGCODE}; }
#nv li.a a { color: {MENUHOVERTEXT}; }
#nv li a:hover { background: url({IMGDIR}/nv_a.png) no-repeat 50% -66px; }
#nv li.hover a:hover, #nv li.hover a { background: url({IMGDIR}/nv_a.png) no-repeat 50% -99px; }
#mu { position: relative; z-index: 1; }
.ie6 #mu, .ie7 #mu { line-height: 0; font-size: 0; }
#mu ul { background: url({IMGDIR}/mu_bg.png) no-repeat 0 100%; line-height: 22px; z-index: 2; font-size: 12px; }
#mu li { float: left; height: 32px }
#mu a { float: left; display: inline; margin: 5px 6px; padding: 0 10px; white-space: nowrap; }
#mu a:hover { margin: 4px 5px; border: 1px solid {SPECIALBORDER}; background: {SPECIALBG}; color: {HIGHLIGHTLINK}; text-decoration: none; }
.floatmu { position: absolute; left: 0; top: 0; }


HTML:

<div id="nv">
<ul>
<!--{loop $_G['setting']['navs'] $nav}-->
<!--{if $nav['available'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1))}--><li {if $mnid == $nav[navid]}class="a" {/if}$nav[nav]></li><!--{/if}-->
<!--{/loop}-->
</ul>
<!--{hook/global_nav_extra}-->
</div>
<!--{if !empty($_G['setting']['plugins']['jsmenu'])}-->
<ul class="p_pop h_pop" id="plugin_menu" style="display: none">
<!--{loop $_G['setting']['plugins']['jsmenu'] $module}-->
<!--{if !$module['adminid'] || ($module['adminid'] && $_G['adminid'] > 0 && $module['adminid'] >= $_G['adminid'])}-->
<li>$module[url]</li>
<!--{/if}-->
<!--{/loop}-->
</ul>
<!--{/if}-->
$_G[setting][menunavs]
<div id="mu" class="cl">
<!--{if $_G['setting']['subnavs']}-->
<!--{loop $_G[setting][subnavs] $navid $subnav}-->
<!--{if $_G['setting']['navsubhover'] || $mnid == $navid}-->
<ul class="cl {if $mnid == $navid}current{/if}" id="snav_$navid" style="display:{if $mnid != $navid}none{/if}">
$subnav
</ul>
<!--{/if}-->
<!--{/loop}-->
<!--{/if}-->
</div>

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Parent and child menu color for current page cmccarten Page & Category Menu Bars 1 Aug 27, 2012 12:19 PM
How to display child pages instead of parent page in menu bar RHCdG Page & Category Menu Bars 12 Jun 25, 2012 07:17 PM
Parent not staying selected when child menu changes incamedia Page & Category Menu Bars 2 Apr 26, 2012 04:18 PM
Want child menu items to be different style from parent robinwiley Page & Category Menu Bars 8 Jan 14, 2011 07:00 AM
Page menu: highlight a parent as current, even when on a subpage andd Page & Category Menu Bars 0 May 16, 2010 05:52 AM


All times are GMT -6. The time now is 11:28 AM.


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