Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #39062
    Jeremy Englert
    Participant

    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!

    #106772
    ChrisxClash
    Member

    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?

    #106963
    wolfcry911
    Participant

    try this:

    #main-nav .current_page_item a {
    background: red;
    }
    #106965
    zardos
    Member

    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

    #106991
    wolfcry911
    Participant
    #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

    #107007
    wolfcry911
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.