Give help. Get help.

  • # July 25, 2012 at 5:32 pm

    I would like to have the parent page stay “active” when the current page is any of the children elements. For example, while on the “Back Story” page, I would like the navigation element “About” to stay highlighted/active.

    Here is the page/website:

    Here is the navigation on CodePen (but it’s a bit harder to work with in my opinion because you can’t actually visit the child pages to test it):

    What do I need to with the CSS to make that happen?

    Thanks everyone!

    # July 25, 2012 at 6:39 pm

    Wordpress adds the super helpful selectors that do that for you. Try doing this:

    .current_page_parent {
    // parent styling here

    .current_page_item {
    // child styling here

    This should work for any page that you’re on.

    Edit: After looking at your css, it looks like you’re actually already using those selectors, however you’re not coloring their backgrounds, only the text. So if you use those along with background it might help out?

    # July 29, 2012 at 8:42 am

    try this:

    #main-nav .current_page_item a {
    background: red;
    # July 29, 2012 at 8:57 am

    Useually you just uese the .current-page-ancestor class on the menu item li.current-page-ancestor and style it the same as .current_page_item

    # July 29, 2012 at 10:12 pm
    #main-nav .current_page_parent a {
    background: red;

    What to note here is that the background is on the anchor – not the li; and that it needs a high specificity (it needs the id in the descendant selector) to override the default background

    # July 30, 2012 at 1:47 am

    check my code above – it works in my testing
    it looks for the current_page_parent (not current_page_item).

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

You must be logged in to reply to this topic.