Change nav item color depending on page

Question

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 -

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?

Based on post id's might be a bit of a pain in terms of maintenance, you probably want something more flexible. Are all posts going to have a black background? — Nick R, May 27 '14 at 11:27
If all other pages have a black background it would be easier to say If on the Homepage, use black font, otherwise use white font. Wordpress has 'is_home()' for php, and some themes have a body class you might be able to use. — Aravona, May 27 '14 at 11:30
^ Yeah, and even easier if you're using Wordpress, as it adds it's own classes to the body tag, like `` and ` — Nick R, May 27 '14 at 11:32

justtal · Accepted Answer · 2014-05-27T12:19:40.560

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".

edited May 27 '14 at 12:19

answered May 27 '14 at 11:49

justtal

800
1
7
16

Wow, almost.. but whenever I add a class to the body it screws up the page... http://tinyurl.com/nxehooc – Social Monster May 27 '14 at 11:57
You must add it, not replace the default class. – justtal May 27 '14 at 11:59
Yeah I added it, not replaced – Social Monster May 27 '14 at 11:59
You also screws the head tag. now the title & scripts tags moved to the body. something wrong there. – justtal May 27 '14 at 12:00
It's a custom page. Here is the JSfiddle http://jsfiddle.net/9Fh6s/ I just added the body at the top – Social Monster May 27 '14 at 12:02
The needs to be above the body: http://jsfiddle.net/9Fh6s/2/ – justtal May 27 '14 at 12:05
Y its a custom page? you don't need to do every post custom page. just add the post name in the body class, and at the css change whatever you want. – justtal May 27 '14 at 12:09
When I place the header before the body it doesn't work.. stupid wordpress.. – Social Monster May 27 '14 at 12:11
You also have the postId in the class of the body: postid-193 so you can do it with it. – justtal May 27 '14 at 12:11
1

Look at the end of my answers. Just use the postid class in the body. just add the css: .postid-193 #cats li a { color: white; } – justtal May 27 '14 at 12:13
Nailed it! :) You can see the postid if you right click and do "View Page Source". – justtal May 27 '14 at 12:17

score 0 · Answer 2 · edited May 27 '14 at 11:44

0

<style type='text/css'> 
  #black a { color:black }
  #white a { color:white }
</style>

...

<a id="<?php echo$color;?>" href="" ></a>

edited May 27 '14 at 11:44

SimplyAzuma

25,214
3
23
39

answered May 27 '14 at 11:34

robin

159
5

score 0 · Answer 3 · answered May 27 '14 at 11:38

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/

Change nav item color depending on page

3 Answers3