Creating special menu CSS for posts, based on post category

  • tamiheaton

    (@tamiheaton)


    12 years, 1 month ago

    Hi all,

    The site I’m working on is a portfolio site which has three post templates (three versions of single.php) and each of those three templates can be assigned to one of three categories (which match the nav): Copywriting, Curation, or Ideation. The site is a child theme of the Responsive Free WP theme (not the paid/premuim version). I actually paid the theme developers for support, but they won’t assist me since I’m working with a child theme. They pointed me back toward the online forums.

    I would like for the nav hover for the current category selected (based on the post category) to display the hover in “selected” fashion. (I want the red image hover to be “on” instead of hovering for posts assigned to that category.)

    I have tried using suggestions from several different posts in the WP forums, and had luck with none of them.

    I have added this code to my child theme’s functions.php file – it didn’t break anything, which seems to be a good start, at least.

    <?php

function add_category_name($classes = '') {
   if(is_single()) {
      $category = get_the_category();
      $classes[] = 'category-'.$category[0]->slug;
   }
   return $classes;
}
add_filter('body_class','copywriting');

    I am trying to change basically anything in the body right now to see if this function is working. I have not been able to affect menus, nor higher-level styles like just changing the body background color. The code I am using in the CSS is:

    body.copywriting {
	background-color: #000000;
}

    I will try to respond and post a link to the site, but it currently has a “coming soon” page up, and I can’t remove it without permission from my client. I’m not sure he will grant permission prior to launch, and we can’t launch unless I fix this. If anyone can help me out, I would really appreciate it. I’m at the point of total frustration.

    Thank you.

Viewing 1 replies (of 1 total)
  • Thread Starter tamiheaton

    (@tamiheaton)

    12 years, 1 month ago

    A bit of additional info I just happened to think might be helpful… the code I am using to create my menu hovers looks like this: 

    .menu a:hover {
	background-color: #ffffff;
	color: #000000;
    	text-decoration: none;
    	background-image: url(http://madewithbacon.com/wp-content/uploads/2014/02/nav-arrow.png);
    	background-repeat: no-repeat;
    	background-position: top center;
        border: 0;
        z-index: 0;
        margin-right: 30px;
}

.menu .current_page_item a,
.menu .current-menu-item a {
	background-color: #ffffff;
	color: #000000;
    	text-decoration: none;
    	background-image: url(http://madewithbacon.com/wp-content/uploads/2014/02/nav-arrow.png);
    	background-repeat: no-repeat;
    	background-position: top center;
}

    Thanks so much if anyone can help. I’ve asked several developers and none of them had any idea what I should do here.

Viewing 1 replies (of 1 total)

The topic ‘Creating special menu CSS for posts, based on post category’ is closed to new replies.