You are here, but where's here? [duplicate]

Question

I find the .youarehere a styling for the main navigation links causes the text to be a little difficult to read on the also-blue header background. Could we give it a little bit of background colour or something else that would provide more contrast?

For example:

which is the product of the following CSS*:

.nav ul li {
    margin: -2px 10px 0 0;
    padding: 5px;
}

.nav ul li.youarehere {
    background-color: rgba(0, 80, 112, 0.25);
    border-radius: 5px;
}

.nav ul li.youarehere a {
    color: #A1E9FF;
}

_{*For bonus points, also reduce the line height for the codeblocks!}

Answer 1

I've added something very similar to the CSS rules suggested above to the Stack Overflow Unofficial Patch v1.16. The specific rules I ended up using are:

.nav ul li.youarehere a {
    display: inline-block;
    padding: 5px;
    margin: -5px;
    border-radius: 5px;
    background-color: rgba(0, 80, 112, 0.25);
    color: #A1E9FF;
}

(The main advantage of re-styling only the a elements, besides letting me combine everything into a single CSS rule, is that it avoids having to mess with the existing padding and margin rules on the li elements.)

The re-styled navigation bar looks like this¹:

   

^{1) Animation only for illustrative purposes. Actual navigation bar will not be animated (except if you keep clicking the links to make it look like it is).}