Tagged: highlight, navigation, parent, sidebar
Hi there,
I’d like to highlight the parent item in the sidebar navigation – without effecting it’s children.
The child is black & bold, I’d like to make the parent item green & bold or perhaps with a border bottom via css.
I’ll try & link to an image file so you know exactly what I’m referring to.
I can see the current_page_ancestor & current_page_parent classes – but they change all the children too – which I don’t want to do.
Many thanks,
Jas
Hey Jason!
Please try adding following code to Quick CSS in Enfold theme options under Styling tab
.main_color .sidebar .current_page_item>a { color: red; }
If that does not work, please upload your screenshot on imgur.com or Dropbox public folder and post the links here. Screenshot you posted cannot be found
Regards,
Yigit
Hey Yigit,
I’ve managed to target the ancestors fine, but what if I wanted to style each individually?
Say, have Pivot Software as the default grey/normal, Software green/bold & Technology Sector green/bold with a border top.
I’m guessing it’s targeting the nesting of these items within the main ul?
Screenshot
Jas
I think I may have sorted it :)
Does this look like the right way to do it?
.main_color .sidebar .current_page_ancestor>a { color: #56802e; font-weight: bold; margin-top: 10px; border-top: solid 1px; }
.main_color .sidebar .children .current_page_ancestor>a { color: #56802e; font-weight: bold; border-top: none; margin-top: 0; }