Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS WP & CSS Tricks-like navigation help

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #35588
    isamj
    Member

    Hi guys, I new here and unfortunately my first post is a question ;)

    I’m using WP, trying to replicate the standard navigation styling as used above in this site.
    I have done the followings so far:
    1. added Category to body class using basic code I got from codex.wp so I can identify the parent category of a post.
    2. created the classes, one for each category navigation button
    3. assigning classes manually in header.php means creating navigation normally while I wanted to use WP native navigation.
    I imagine this to be like: first

  • element gets the first class. the second gets the second and so on.

    I’m really not sure how to put this question, but i basically need help achieving that style used in css-tricks, i.e. different colors for hover and sticky current indicators on internal pages but through WP native navigation.
    I really appreciate any tips here.
    Thanks
    p.s. congrats on having the site back
    Isam

#92457
isamj
Member

Ok.. you can ignore that. I guess i was going in the wrong direction.
I used titles to access navigation elements in combination with the following code to add category name to body class:

function category_id_class($classes) {
if(is_single() || is_category()){
global $post;
foreach((get_the_category($post->ID)) as $category)
$classes[] = $category->category_nicename;
}
return $classes;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');

Accodringly, CSS was like:

.catName [title=cat title]{
}

IE8 will need DOCTYPE declared.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.