Showing "skip-to-content" link on a sticky header

[Gandalf]

I’m trying to add a skip-menu link to a page but my header is sticky so the link is underneath the header. My brain refuses to come up with any suggestions

Here’s my pen:

[DaveMaxwell]

Well, you have transform: translateY(-100%), so you’ll never see it period.

Is this the look you’re going for? If so, remove the transform, and add a z-index to both the skip link and the header, and make the skip link a higher z-index so it sits on top.

[Gandalf]

The idea was that it would be hidden until it was in focus.

[PaulOB]

Try this:

.skip-menu {
  background: #e77e23;
  color: white;
  height: 30px;
  left: 10%;
  padding: 8px;
  position: fixed;
  top:0;
  z-index:99;
  transform: translateY(-100%);
  transition: transform 0.3s;
}
.skip-menu:focus {
  transform: translateY(0%);
}

[Gandalf]

Nice one, squire! Thanks.

My brain lives to see another day.

[molona]

You can always count on Paul… except when he’s on holidays, of course