<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.