Caspert Caspert - 3 months ago 7
CSS Question

How to position a border at the top?

It should be simple, but I don't know how. What I want is that the

.current
class adds a border to the current list item within the navigation menu.

I've done this already (see example: http://codepen.io/anon/pen/jARqOr)
But I would like to have the border aligned to the top of the header, like in this imag (the red border):

enter image description here

What should I do to get this result?

Looking forward to your response.

Thanks.

Answer

I'm not sure if this is the best solution, but this worked:

ul li a.current {
  padding-top: 50px;
  margin-top: -55px;
}

Setting margin-top to -55px (the negative value of the header's padding) takes it to the top, and then adding a padding-top of 50px (55px - 5px for the border) brings the text down to be even with the other anchor elements.

One issue with this solution is that all the space above the .current anchor is part of the clickable area.