<header>
<nav>
<div class="logo">Logo</div>
<ul>
<li><a href="#">Item 1 lorem ipsum</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Longer item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</nav>
</header>
/*
Align nav items around a centered logo
Caveat: doesn’t wrap when items overflow container width
*/
/* Quick reset, don’t do this for real ;c) */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
background: #efefef;
padding: 2rem 1rem;
position: relative;
}
nav a {
background: #bbb;
color: #111;
display: flex;
padding: 1rem;
text-decoration: none;
}
.logo {
align-items: center;
background: purple;
color: #fff;
display: flex;
height: 5rem;
justify-content: center;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 5rem;
}
ul {
display: flex;
list-style: none;
}
li {
display: flex;
flex: 0 0 auto;
left: calc(-50% - 3.5rem);
list-style: none;
order: 999;
padding: 0 .5rem;
position: relative;
}
li:first-child {
margin-left: auto;
}
li:nth-of-type(n+3) {
left: auto;
order: -999;
right: calc(-50% - 3.5rem);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.