Change nav item color depending on page

2 Views

I’m trying to change the color of the nav links depending on what page you are on. It is a fixed header. (Here is the link to my site).

For example, on the front page it is black and easy to read –

Read More

enter image description here

But when you go to the site’s posts the backgrounds are black, making the nav links impossible to read –

enter image description here

Is it possible to change the nav links based on the post’s id?

Post Views: 2

Related posts

Leave a Reply

3 comments

  1. You can give the body tag class by the post unique slug.

    <body class="<?php print $post->post_name; ?>">

    like here it will be:

    <body class="blackfoot-phoenix">

    and then in the css:

    .blackfoot-phoenix #cats li a {
    color: white;
}

    You can also do it with the post id: postid-193 that in the body class.

    .postid-193 #cats li a {
        color: white;
}

    You can see the postid if you right click and do “View Page Source”.

  2. Depending on what you would like the outcome to be, you could give it a white background on the header links using css:

    #cats li a {
  text-decoration: none !important;
  background-color: #fff;
}

    By doing this it will appear normal, but on dark background it will have white behind the text. Alternatively you could assign it a class and set it per page using classes. WordPress is not very friendly setting per page, but there may be some plugins available. Try something like this: https://wordpress.org/plugins/stylesheet-per-page/installation/