What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 133 Stack Exchange communities.

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:

contrasted youarehere link

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!

share|improve this question
1  
+1 just for the title! –  Amal Murali Apr 17 at 4:24
19  
Whereever I go, there I am. –  Shog9 Apr 17 at 4:24

1 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 this1:

    Screenshots of restyled meta.SE navigation bar

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

share|improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .