<div class="item">
  
  <a href="#skip-content" class="skip-link">Skip to content</a>

  <h1>2.4.1 - Bypass Blocks
    <small>Press tab to navigate to the skip-link</small>
  </h1>
  
  <nav class="nav__parent">
    <ul class="nav__list">
      <li class="nav__item"><a class="nav__link" href="">Home</a></li>
      <li class="nav__item"><a class="nav__link" href="">Products</a></li>
      <li class="nav__item"><a class="nav__link" href="">About</a></li>
      <li class="nav__item"><a class="nav__link" href="">Contact</a></li>
    </ul>
  </nav>
  
  <main role="main" id="skip-content" tab-index="-1">
    <h2>Main content</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda maiores, veritatis repudiandae quod modi unde alias, velit provident voluptatum facilis explicabo nostrum facere. Quibusdam veniam consectetur repudiandae, <a href="#">ducimus saepe laudantium</a> nisi, cupiditate odit minus, assumenda totam necessitatibus aspernatur voluptates. Blanditiis.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt exercitationem sunt ea nemo ad est asperiores. Saepe, consequatur aliquid <a href="#">qui accusamus eaque</a> ducimus illo ratione totam esse eius, neque vero, aspernatur quibusdam. Aut tenetur, id incidunt repellat labore hic totam!</p>
  </main>
  

.skip-link {
  position: absolute;
  top: 0;
  left: -9999px;
  z-index: 10001;
  padding: 6px 12px;
  background: rgb(2, 117, 216);
  color: #FFF;
  width: 100%; 
  text-align: center;
}

.skip-link:focus {
  left: 0;
  color: #FFF;
}


/* 

  DEMO STYLING

*/

body {
  padding: 80px 30px;
}

h1 {
  text-align: center; margin: 0 auto 30px auto; font-size: 24px;
}

h2 {
  font-size: 20px; font-weight: 700; display: block;
}

h1 small {
  display: block;
  font-size: 14px;
  margin-top: 10px;
}

.item {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}


p a {text-decoration: underline; }

.nav__list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-flow: row wrap;
}
.nav__item {
  border: 1px solid #0275d8;
  width: 25%;
  min-width: 100px;
  text-align: center;
  margin-right: -1px;
}

.nav__link {
  display: block;
  padding: 8px 16px;  
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js