Accessing first level css menu style (ancestor?) regardless of page menu level

  • isomyriad

    (@isomyriad)


    14 years ago

    Hello there ??
    I’m developing a website for a charity, and I’m looking for a little help. I’m using the twenty ten theme, and wondering how I access the first level menu ancestor, regardless of current item level level.

    For example, I would like to style the 1st level ancestor’s background to indicate to the user which menu the page is in. So I use-

    #access ul li.current-menu-ancestor > a {background: url(‘https://127.0.0.1/wordpress/wp-content/uploads/2011/02/tab2.jpg’);}

    This works fine when the current page is in the second level dropdown of the menu, however in the third (and so on) levels, it is the second level, which shows the background style.

    This happens using both current-menu-ancestor > and current-menu-parent >

    I hope this makes sense to people, and isn’t too unclear!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Chip Bennett

    (@chipbennett)

    Try targeting the following CSS classes:

    .current_page_ancestor,
.current_page_parent {
     /* CSS styles go here */
}

    The .current-menu-ancestor and .current-menu-parent classes only get applied if wp_nav_menu() (i.e. a custom menu) is used to output the menu. If the fallback menu is used (i.e. wp_list_pages()), then these classes won’t get applied.

    However, the .current_page_ancestor and .current_page_parent classes are applied for both wp_nav_menu() output and for wp_list_pages() output.

    (I’ll bring this up with Ian Stewart; I just noticed that he’s targeting the menu classes, rather than the page classes, in styling the TwentyTen nav menu.)

    Thread Starter isomyriad

    (@isomyriad)

    Hi there Chip, thanks for the reply!
    The code you suggested didn’t exist in my stylesheet so I created it- i.e

    #access ul li.current_page_parent a {
    background: red;
    }

    The problem with this is that all of the items in the dropdown are affected. 1st, 2nd and third menu items for the particular menu tab.

    Do you know how I can make it affect only the first level? ??

    You need to reset the background color for nested lists. For example:

    #access ul li.current_page_parent ul a {
background: black; /* Use whatever your default background color is */
}

    Thread Starter isomyriad

    (@isomyriad)

    Resetting the background colour worked, unfortunately we’re back to a situation where a level three selection themes the second level menu item, and not the first :/

    I used the code that you offered above…

    Should I paste my menu section in here?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Accessing first level css menu style (ancestor?) regardless of page menu level’ is closed to new replies.