Forums

JeremyEnglert

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!

death180

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

That shows multiple solutions.

JeremyEnglert

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

ChrisxClash

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?

JeremyEnglert

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;
}

JeremyEnglert

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

wolfcry911

try this:

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

zardos

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

JeremyEnglert

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

wolfcry911

#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

JeremyEnglert

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

JeremyEnglert

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.

wolfcry911

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

JeremyEnglert

@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?

treehouse : what would you like to learn today?

Forums

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