Current Navigational Highlighting

[mintertweed]

Okay, so currently, my menu is partially working. Here is my website. Home, Projects, Contact, Shop, and Support all have current navigational highlighting. I am using the same exact code, switching out the class names, for Blog and Forums, and yet, they do not highlight when you are on their respective pages. I can not figure out why. Also, if I select Feel Good Candy or Leaflet from the drop-down menu, it highlights the entire menu, beginning with Projects and ending with Leaflet. I need it to highlight the selected menu li and also highlight Projects, but not the other unselected menu li. Any suggestions?

Here is my CSS code for the menu styles:

/*
MENU STYLES
*/

.header-home a,
.page .header-home a,
.header-projects a,
.page .header-projects a,
.header-blog a,
.page .header-blog a,
.header-forums a,
.page .header-forums a,
.header-contact a,
.page .header-contact a,
.header-shop a,
.page .header-shop a,
.header-support a,
.page .header-support a {
color: #7B0046;
}

.header-home a:hover,
.page .header-home a:hover,
.header-projects a:hover,
.page .header-projects a:hover,
.header-blog a:hover,
.page .header-blog a:hover,
.header-forums a:hover,
.page .header-forums a:hover,
.header-contact a:hover,
.page .header-contact a:hover,
.header-shop a:hover,
.page .header-shop a:hover,
.header-support a:hover,
.page .header-support a:hover {
color: #FFFEF2;
}

body.page-feelgoodcandy ul#main-navigation li.header-projects li.header-leaflet a:hover,
body.page-leaflet ul#main-navigation li.header-projects li.header-feelgoodcandy a:hover {
color: #7B0046;
}

ul#main-navigation li a:hover,
body.page-home ul#main-navigation li.header-home a,
body.parent-slug-projects ul#main-navigation li.header-projects a,
body.page-blog ul#main-navigation li.header-blog a,
body.page-forums ul#main-navigation li.header-forums a,
body.page-contact ul#main-navigation li.header-contact a,
body.page-shop ul#main-navigation li.header-shop a,
body.page-support ul#main-navigation li.header-support a,
body.default ul#main-navigation li.header-home a,
body.page-feelgoodcandy ul#main-navigation li.header-projects a,
body.page-leaflet ul#main-navigation li.header-projects a,
body.page-feelgoodcandy ul#main-navigation li.header-feelgoodcandy a,
body.page-leaflet ul#main-navigation li.header-leaflet a {
color: #FFFEF2;
}

The help you guys give me is always greatly appreciated.

[Alen]

I’m just wondering why are you targeting each `a` within navigation, like so:

.header-home a,
.page .header-home a….

Wouldn’t…

#main-navigation li a {
color: #7B0046;
}

take care of all the links within `ul` element with `id` of `main-navigation`. Then you could do hover, like so:

#main-navigation li a:hover {
color: #FFFEF2;
}

Are you generating main navigation via WordPress or are you hard coding? There should be a class of `.current-menu-item` and `.current_page_item` applied to corresponding link, when clicked.

[TheDoc]

`post-hello-world` shouldn’t be the only class that is showing on the body if you’re using the body_class() function.

[Alen]

That tutorial was posted in 2009.

WordPress has since integrated much better navigation handling.

What happens when you add a page or blog post… do you have to edit your templates to add corresponding code?

[TheDoc]

Something is not right if that’s the case. When you go to the blog page, you shouldn’t be getting the slug of the first post.

[TheDoc]

Maybe try killing the slug function you added to functions.php.

[Alen]

@TheDoc is right. I just tested on my local install. Out of the box WP has these classes applied to it’s body.

When logged into admin:

body class=”home blog logged-in admin-bar no-customize-support custom-font-enabled single-author”

When logged out:

body class=”home blog custom-font-enabled single-author”

And when clicking on Sample Page, you get:

[Alen]

If you go to `wp-includes/post-template.php` on line 316 there is a function `get_post_class` that should be generating classes you need. For some reason this is not returning anything. You either changed some settings or something is broken. Did you add any custom functions to your `functions.php` file?

http://codex.wordpress.org/Function_Reference/body_class

[Alen]

Wait. I just checked your site again and it works. It’s just not getting generated on `blog` page.

[TheDoc]

Aaaah could be.

In your WordPress settings (I think under ‘Reading’), select your ‘Blog’ page as your Home and ‘Home’ as your ‘front-page’.

[Alen]

The body_class should return classes that belong to specific page/post regardless if you have latest posts or static page selected.

Something is not working or you have configured settings/templates incorrectly.

I’ve tested with clean install of WordPress along with blank themes from [HTML5 Reset](https://github.com/murtaugh/HTML5-Reset-Wordpress-Theme) and [Bones](https://github.com/eddiemachado/bones).

You can try using [conditional statement](http://codex.wordpress.org/Function_Reference/is_front_page) `is_front_page()` to check if user is on Front Page then just output corresponding classed to the body. But this should not be necessary, `body_class()` should take care of this…

[Alen]

Just tested Starkers out of the box and it works both as static page and latest posts

[Alen]

Wait, wait… the `body_class()` is a WordPress function. It has nothing to do with CSS file. It simply outputs page, post, environment details to `body` html element so that you can target them in your style sheet. These “classes” are predefined by WordPress.

You could add custom classes, like so:

>

[Alen]

How is your theme structured? Are you using any custom templates for your blog? Are you altering something via filters/hooks in your functions.php file?

[Alen]

Ok lets do this:

1. Deactivate all of your plug-ins (reload the page, see if it works)
2. Then turn on plug-ins one-by-one, going back and refreshing after each activation to see if it works. This could be plug-in issue…

[Author]

Posts