SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Keeping parent page active in the nav bar, when on a child page

    Bit of a Wordpress CSS conundrum!

    So, I am not showing the child pages in the menu, however I would like to highlight the parent page in the nav bar when in the three child pages.

    My understanding is that the CSS that is already in the stylesheet should do the trick, however it isn't! CSS below.

    Code:
    #nav >ul>li.hovered,
    
    #nav >ul>li.current-menu-ancestor,
    
    #nav >ul>li.current-menu-item 			{	color:#e30613 !important;}
    
    
    
    #nav >ul>li.hovered >a,
    
    #nav >ul>li.current-menu-ancestor >a,
    
    #nav >ul>li.current-menu-item >a			{	-moz-opacity:1; filter:alpha(opacity=100); opacity:1;color:#e30613 !important;  }
    Any help is greatly appreciated...

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi to thestealthyfox. Welcome to the forums

    Could you post a link to the site? We need to see the HTML that goes with this CSS to know if it's right or not. Normally this is really easy to do, but with WP in the mix, we CSSers may be up against more than we bargain for.

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would help wouldn't it!
    The dev area site address is http://www.eclipse-experience.com/subdirectory

    I just can't work it out, to me the CSS is all there. I'm not sure if it's down to the fact I'm using a custom menu? But that's quite commonplace in WP these days isn't it...

    Thanks Ralph

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    From what I can see, you've just targeted the wrong class name. On 'ancestor' pages, the menu class name is

    Code:
    .current-page-ancestor
    rather than

    Code:
    .current-menu-ancestor

  5. #5
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm, I've changed menu over to page, but still no joy? I did try that earlier too. This is why it's got me completely baffled!

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    The changes aren't online yet. Make sure to change the rule for the <a>s:

    Code:
    #nav > ul > li.hovered > a, #nav > ul > li.current-page-ancestor > a, #nav > ul > li.current-menu-item > a {
        color: #E30613 !important;
        opacity: 1;
    }

  7. #7
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect - all working! Thanks I have another query, but should I start another thread for that?

  8. #8
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I've just realised - when I'm on a single post page, it doesn't highlight the news part on the menu. Any suggestions?

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by thestealthyfox View Post
    I've just realised - when I'm on a single post page, it doesn't highlight the news part on the menu.
    Weirdly, the menu in that section places a different class on the LIs. So you'd need to add this:

    Code:
    #nav > ul > li.hovered > a, #nav > ul > li.current-page-ancestor > a, #nav > ul > li.current_page_parent a, #nav > ul > li.current-menu-item > a {
        color: #E30613 !important;
        opacity: 1;
    }
    O, the joys of WordPress (not!).

  10. #10
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Absolutely perfect - thanks you're a life saver

  11. #11
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You're welcome. Glad it helped.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •