My Current-Menu-Item

I’m not especially fond of breadcrumbs. I have nothing against them personally and have no problem when people choose to use them, but for my own personal websites I prefer to have highlighted menu items indicating where on the website people are. My websites are small, and the hierarchy only goes so deep. Every page points to a menu item. So it makes perfect sense to me that the menu item a page points to should be highlighted in some way when you’re on that page.

On this site I chose to go with something quirky and fun. Not only did I want the text to change from black-to-red, but I wanted a little strawberry to appear above the menu item. It doesn’t matter which page or sub-page or category you go to on my site, the menu item comes up highlighted with red text and that quirky little strawberry.

Adding a current-menu-item class for the primary menu was easy. Mine looks like this:

.nav-primary .current-menu-ancestor a,
.nav-primary .current-page-ancestor a, 
.nav-primary .current_page_item a {
	background: url(images/float.png) top center no-repeat; 
	color: #b90000;
	}

NOTE: My site does not use current-menu-item; instead, it uses current-page-item.

Because the above CSS also added the quirky little strawberry and text color change to the sub-menu items, which I did not want, I had to include the following:

.sub-menu .current-page-ancestor a, 
.sub-menu .menu-item a {
	background: none;
	}

So far, so good. The only thing left were the posts.

Normally, adding classes to the CSS or code to functions.php does the trick. This time, however, no matter what I tried, I could not get posts to point to the correct menu item.

Finally, I found a way. Here’s what I did you can try:

1. Install the Genesis Simple Hooks plugin by Nathan Rice.
2. Activate the plugin.
3. Go to Genesis >> Simple Hooks (on your Dashboard menu) and add something like this to the wp_head hook:

   <?php if ( is_single() && in_category( 'blog' ) ) { ?>
       <style type="text/css">
           .nav-primary #menu-item-1306 {
               background: url(https://yourwebsite.com/wp-content/uploads/image.png) top center no-repeat;
           }
           .nav-primary #menu-item-1306 a {
               color: #b90000;
           }
       </style>
   <?php }

4. Change the code in red to (1) the category your post is in, (2) the ID for the menu item you want to highlight (view source code to find out what it is), and (3) the image file you want to use for the background.
5. Check the little box to execute PHP on the hook
6. Save. That’s it!

There are two categories on this website that feature posts. Here’s what my full code in Genesis Simple Hooks looks like.