The “li class” of the parent category causes all childs links to highlight! Help

  • scdwb

    (@scdwb)


    15 years ago

    Hello,

    I’m trying to highlight my current category in my wordpress dropdown menu.

    Im using wp_list_categories, which automatically amends a list class of <li class=”current-cat”> to the top level category, when the category is selected. When a child category is selected it automatically amends the “current-cat” class to the child and “current-cat-parent” to the top level category.

    This seemed great and I went ahead and added the following to my css.

    ul.main li.current-cat a{background:#444;}

    This works great when I am on the child category page. As the category has the background #444 in the dropdown menu.

    However, there is a problem when im on the top level category. As every single child category, as well as the parent is highlighted #444.

    Looking at the source code I can see why. 

    <li class="cat-item cat-item-1 current-cat-parent"><a href="">Parent Category</a> 

<ul class='children'> 

<li class="cat-item cat-item-4"><a href="">Child Category 1</a></li> 

<li class="cat-item cat-item-5 current-cat"><a href="">Child Category 2</a></li> 

<li class="cat-item cat-item-6"><a href="">Child Category 3</a></li> 

</ul> 

</li>

    The li of the parent category is open for the entire list of child categories. So whatever css style is applied to the parent category, the same style is given to all the child categories. So when I am am on the parent category pages every single item in this category is highlighted #444.

    Is there a solution so when im on the parent cat only this link is highlighted and not all the child cat links aswell?

    Thanks in advance! ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter scdwb

    (@scdwb)

    Really need help with this can someone help me out?

    Thanks !

    Moderator cubecolour

    (@numeeja)

    Without seeing how you have your css I’d guess you need to put the li li stuff after the li stuff so anything that modifies the li code (ie li.current-cat-parent) is overridden by the li li code.

    Thread Starter scdwb

    (@scdwb)

    Hi thanks numeeja,

    my css for the nav current-cat class is:

    ul.main li ul li.current-cat a{background:#444;}

    So now the child category links are highlighted when im on a child category, which is great. When on the parent category nothing is highlighted.

    Before I had the css like this:

    ul.main li.current-cat a{background:#444;}

    This is where I had the problem of everything being highlighted when on the parent category.

    I think it is because the li isn’t closed before the child categories start as I mentioned in the first post.

    Would love to get this sorted, unless this is a bug in wordpress?

    I would like the parent category to highlighy without all the child categories being highlighted at the same time when on the parent category.

    Thank you, I hope someone can help

    esmi

    (@esmi)

    Try resetting the background for the .children class:

    ul.main li.current-cat .children a{background:#c00;}

    replacing #c00 with whatever your default background color is.

    Thread Starter scdwb

    (@scdwb)

    Genius, thanks esmi ! ??

    I thought that would mean it would no longer be highlighted when I was on the child category now. But it now works perfectly. Child links are highlighted when on a child category and the parent is highlighted (and child link are now normal) when on the parent category.

    Do you know how I would also highlight the parent link when I am in a child category? As the child categories are shown in a dropdown, so I would like the parent to be highlighted when in a child category too.

    I tried:

    ul.main li.current-cat-parent a{background:#444;}

    but that just made all the link highlight again.

    so I then added this:

    ul.main li.current-cat-parent .children a{background:#555;}

    but that stopped the child cat I was on being highlighted.

    Thanks again!

    esmi

    (@esmi)

    Unfortunately, there isn’t a current-cat-ancestor class – which is what you really need for this.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘The “li class” of the parent category causes all childs links to highlight! Help’ is closed to new replies.