1

Here's a sample navigation menu:

nav {
  border-top: 5px solid;
}

nav a {
  font-size: 12px;
  padding: 1em;
}
<nav>
  <a href="#">Page 1</a>
  <a href="#" id="current">Page 2</a>
  <a href="#">Page 3</a>
  <a href="#">Page 4</a>
</nav>

How can I change the part of the border color above the current page so it looks like this:

enter image description here

1 Answers1

2

You can use a border-top and negative margin with equal value to match it with the nav top border - see demo below:

nav {
  border-top: 5px solid;
}

nav a {
  font-size: 12px;
  padding: 1em;
  display: inline-block;
  vertical-align: top;
}

#current {
  border-top: 5px solid orange;
  background: #eee;
  margin-top: -5px; /* negative margin for pulling up */
}
<nav>
  <a href="#">Page 1</a>
  <a href="#" id="current">Page 2</a>
  <a href="#">Page 3</a>
  <a href="#">Page 4</a>
</nav>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
  • Looks good, but I wonder what the following does: `vertical-align: top;`? –  Apr 23 '19 at 07:04
  • `vertical-align` is used to *vertically align* `inline-block` elements - see examples [here](https://stackoverflow.com/questions/41375341/how-to-align-these-buttons-in-a-row) and [here](https://stackoverflow.com/questions/39145388/vertical-align-font-awesome-icon-with-text-within-li/39145674#39145674) as to why its used when you use `inline-block` elements – kukkuz Apr 23 '19 at 07:07
  • You have a point, but it doesn't seem to make any change in my menu. –  Apr 23 '19 at 07:09
  • here the default *baseline* alignment works fine, so you may omit overriding `vertical-align` if you want :) – kukkuz Apr 23 '19 at 07:11
  • @Mike the important thing here is the usage of `inline-block` to override the default `inline` behaviour of `a` tags... – kukkuz Apr 23 '19 at 07:19