- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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!
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?
try this:
#main-nav .current_page_item a {
background: red;
}
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
#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
check my code above – it works in my testing
it looks for the current_page_parent (not current_page_item).