Grow your CSS skills. Land your dream job.

Current Navigational Highlighting

  • # March 7, 2013 at 4:00 pm

    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.

    # March 7, 2013 at 7:11 pm

    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.

    # March 7, 2013 at 7:22 pm

    Okay, so I looked at the body class on the two pages that are not working. I now know why they are not working, but I question how to actually use the data I discovered. For the Blog, I get this:

    So, if I change my code to reflect this body class, my CSS would look like this:

    body.post-hello-world ul#main-navigation li.header-blog a {
    color: #FFFEF2;
    }

    Which is all fine and dandy, but that does me no good if I create another post. The body class will then change to the most recent post and I would have to change my CSS code all over again.

    Similarly, my Forums currently has this as a body class:

    So, just for kicks to see if I was understanding everything, I changed my CSS to this:

    body.forum-general-forums ul#main-navigation li.header-forums a {
    color: #FFFEF2;
    }

    And it works. But alas, if I make a new forum, the body class will change once more. How do I ensure that my body class will equal blog or forums for simplicity’s sake? I would really appreciate some help on this. Thank you in advance!

    Edit #1: @AlenAbdula, sorry, I did not see your message. Targeting #main-navigation instead of each individual item is probably more logical. I will try it out. Also, @chriscoyier suggests against using a class of .current in his tutorial here, which is where the method I am using originates from.

    Edit #2: @AlenAbdula, thank you for the suggestion about targeting the #main-navigation li a instead of writing each one out individually. Now, I just need to figure out this current navigational highlighting.

    # March 7, 2013 at 7:38 pm

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

    # March 7, 2013 at 7:42 pm

    @TheDoc, and yet it is (as far as I can tell). I do not see anything else being called in the body though. This is how my body and its class are being called:

    >

    And this is what appears when I view the page source on Blog:

    And that is all it says. Hrm.

    # March 7, 2013 at 7:44 pm

    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?

    # March 7, 2013 at 7:48 pm

    @AlenAbdula, I just created a test post and this is the body class:

    So, yes, I would have to change my code each time I do a new post, which should not be how things are done.

    # March 7, 2013 at 7:57 pm

    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.

    # March 7, 2013 at 7:57 pm

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

    # March 7, 2013 at 8:17 pm

    @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:

  • on navigation list items.

# March 7, 2013 at 9:03 pm

Okay, I killed the slug function, now it is giving me this:

Here is the page if you want to see it for yourself. How am I supposed to use a blank body class? Also, this disabled current navigational highlighting for all of my pages, but I do realize I need to remove “page” from the body class definition in my CSS.

# March 7, 2013 at 10:02 pm

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

# March 7, 2013 at 10:04 pm

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

# March 8, 2013 at 12:38 pm

Could this be because I am using a static page as my home page and a separate page called “Blog” for my blog page?

# March 8, 2013 at 12:51 pm

Aaaah could be.

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

Viewing 15 posts - 1 through 15 (of 43 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".