<header>
  <div class="header-container">
    <a href="#" class="header-logo">
      <h1>Sample Site</h>
    </a>
  </div>
</header>

<nav>
  <div class="nav-container">
    <ul class="global-nav">
      <li><a href="#">About</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Access</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
header {
  background: #505b66;
}

.header-container {
  padding: 20px 20px 10px 40px;
}

.header-logo {
  color: white;
  text-decoration: none;
}

.header-logo h1 {
  margin: 0;
  color: white;
  width: 200px;
  height: 44px;
}

nav {
  background: #505b66;
}

.nax-container {
  padding: 0 20px 0 20px;
}

.global-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.global-nav li {
  flex: 0 0 25%;
  border-top: 1px solid #72818f;
}

.global-nav a {
  display: block;
  padding: 10px 0;
  border-bottom: 3px solid #ffffff;
  text-decoration: none;
  text-align: center;
  line-height: 100%;
  color: #ffffff;
}
.global-nav a:hover {
  border-bottom: 3px solid #505b66;
  font-weight: bold; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.