Targeting ancestor in menu in Genesis Sample Theme

Community Forums Forums Design Tips and Tricks Targeting ancestor in menu in Genesis Sample Theme

This topic is: not resolved

This topic contains 8 replies, has 3 voices, and was last updated by  PhilMurray 2 months, 1 week ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #59683

    budskab
    Participant
    Post count: 2

    Hi

    I’m doing some customizations to the genesis sample theme.

    I really want to target the menu, when being on one of the child sites, so that the menu is highlighted in the same way that if it was a current-menu-item.

    I’ve formerly done this (prior Genesis 2.0, with current-menu-ancestor or current-page-ancestor and such.

    I’ve tried all of these combinations:

    .nav-primary .current-page-ancestor > a,
    .nav-primary .current-post-ancestor > a,
    .nav-primary .current-menu-ancestor > a

    I wasn’t sure about if the “greater than” was maybe the trouble, so I also tried without… but didn’t work either

    How come it doesn’t work anymore? And, most importantly, how is it done now?


    #59694

    Sridhar Katakam
    Participant
    Post count: 1050

    There are several possible CSS selectors. Here is one:

    .genesis-nav-menu > .menu-item.current-page-ancestor > a

    Sample CSS:

    .genesis-nav-menu > .menu-item.current-page-ancestor > a {
        color: #FFFFFF;    
    }

    #59730

    budskab
    Participant
    Post count: 2

    Hmm… tried that ..

    The original code, targeting when on a current page looks like:

    .nav-primary .current-menu-item > a {
    	color: #E60E0E;
    	background-color: #fff;
    }

    This works fine for “Frontpage > Page”
    But your suggestion didn’t highlight when on : “Frontpage > Page > Subpage”

    Have any other suggestions?

    Thanks in advance
    Mark


    #59731

    Sridhar Katakam
    Participant
    Post count: 1050

    The CSS I suggested is working on my test site (on localhost).

    Can you provide the URL of your site in question?


    #119234

    PhilMurray
    Participant
    Post count: 69

    hi

    I am having a similar problem

    I am re-building the child theme for my site http://www.fingerprintdigitalmedia.com and have some CATEGORY links in the top menu

    if you look at the OUR CLIENTS link and click one of it’s sub links i would like the TOP LEVEL item [ie: OUR SERVICES to be highlighted.

    i tried;
    .genesis-nav-menu a:hover,
    .genesis-nav-menu .current-menu-item > a,
    .genesis-nav-menu .sub-menu .current-menu-item > a:hover,
    .genesis-nav-menu > .menu-item.current-page-ancestor > a {
    color: #ac8ad9;
    }

    but the menu link is not getting highlighted

    it is because the sub menu link is a CATEGORY? if so how do i fix the CSS?

    thanks

    Phil

    #119419

    Sridhar Katakam
    Participant
    Post count: 1050

    Phil,

    Try

    .current-menu-ancestor a {
    	color: #ac8ad9;
    }

    #119459

    PhilMurray
    Participant
    Post count: 69

    Thanks Sridhar

    i tried that – it highlights the ancestor ok but not all the SUB MENU items are also highlighted

    any idea how to fix that?

    thanks
    Phil

    #119460

    Sridhar Katakam
    Participant
    Post count: 1050

    Change the selector to

    .current-menu-ancestor > a


    #119469

    PhilMurray
    Participant
    Post count: 69

    Terrific Sridhar – that nailed it

    thanks very much for sorting that.

    Phil

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.