Grow your CSS skills. Land your dream job.

Keep Parent Item Active when Child Element is Current Page – CSS/WordPress

  • # 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:
    http://bit.ly/M91Jj7

    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):
    http://codepen.io/JeremyEnglert/pen/rtFbA

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

    Thanks everyone!

    # July 25, 2012 at 5:55 pm

    This should help: http://codex.wordpress.org/Dynamic_Menu_Highlighting

    That shows multiple solutions.

    # July 25, 2012 at 6:17 pm

    Thank you! However, those methods seem to be based around PHP. Isn’t there a way to do this using CSS?

    # 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 6:11 am

    I don’t seem to be having any luck with that. I’m trying it out on a simpler navigation, if you check out this link and make the browser smaller (480px and below) you’ll see the navigation I’m working with.

    http://www.mcfaddengavender.net/newmg/services/

    I’m trying to set the active navigation element to have a red background, this is the code I’m using:

    .current_page_parent {
    background: red;
    }

    # July 29, 2012 at 6:12 am

    Thanks for your help Chris! Hopefully I’m just missing something small.

    # 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
    /R

    # July 29, 2012 at 9:50 pm

    @WolfCry911 – we’re getting close.

    http://www.mcfaddengavender.net/newmg/services/

    You can see it there, but it is only working when the parent element is chosen. I need the red background to show on the parent element even when a child element is chosen. (Red obviously won’t be the color I use at the end, I’m just using it to make it easier to see during testing).

    # 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 29, 2012 at 10:54 pm
    #main-nav .page-item-6.current_page_item a {
    background: red;
    }

    I’m making progress, before the parent element didn’t even stay active when it was the current page – using the code above, I was able to have each parent have a separate active color when it was the current page.

    However, I can’t figure out how to have the parent keep this styling when a child element is the current page.

    # July 29, 2012 at 11:04 pm

    Also, if you check it out in mobile (just pull your browser to 480px or less), you can see I also got each parent element to have it’s own current page/active color.

    So big thanks for your help so far! This nav is just turning out to be a bit trickier than expected.

    # 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).

    # July 30, 2012 at 5:21 pm

    @wolfcry911 – Ahhh, you’re right! Sorry about that, I didn’t realize my code said “item” opposed to “parent.”

    #main-nav .current_page_parent a {
    background: red;
    }

    Works perfectly. But now the next challenge – I want to have each parent item have it’s own unique color, so I tried this:

    #main-nav.page-item-16 .current_page_parent a {
    background: red;
    }

    But had no luck, any ideas?

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".