Navigation bar to have different colored buttons when in a category

  • Ok I give up I need help!

    What I’m trying to achieve is when a user is in a particular category the navigation bar will highlight the section they are in. I have managed to achieve this using the following code

    <?php if (!is_page() && !is_home()){ $catsy = get_the_category(); $myCat = $catsy[0]->cat_ID; $currentcategory = '&current_category='.$myCat; } wp_list_categories('orderby=name&title_li=&exclude=18,19,36&current_category='.$currentcategory); ?>

    The above code generates the horizontal menu and includes “current-cat” within the <li class=””> so I can control the active section button color with CSS.

    BUT what I want to be able to do is have the active category button be a different color depending on which section they are within.

    Example of what I’ve got so far

    You will notice that currently it just stays blue, but I want it to be the color that corresponds with the header image.

    The big question is how do I make the “current-cat” be a unique value so I can define it in the style sheet.

    Or does someone know another way of doing this?

Viewing 2 replies - 1 through 2 (of 2 total)

  • The best way to do this is to use the body_class() function. In your theme files, make sure the body tag has it:

    <body <?php body_class(); ?>>

    Then you can use css to alter the colours of menus that are inside the body, by looking for any category class that is generated by the body_class() function. Offhand I think each category generates a slug, like category-news, category-today and so on.

    Richard

    Thread Starter [email protected]

    (@sheyess-heyescom)

    jbbrwcky…

    I can’t believe I was so dense… It was a classic case of over complicating it, and staring at it for to long (as I think most of the issues on these forums are…)

    You pointed me in the right direction SO THANKS VERY MUCH!!

    Solution for anyone else…

    I already had a unique body tag for each category so all i need to do was in the style sheet do the following

    #football li.current-cat {
	background: #000000 url(images/highlight.gif);
	color: #FFFFFF;
	}
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Navigation bar to have different colored buttons when in a category’ is closed to new replies.