<ul class="nav">
  <li>Call us today</li>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li class="logo"><a href="#"> LOGO </a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li>CTA</li>
</ul>
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
.nav{
	max-width:1280px;
	margin:1rem auto;
	display:flex;
	align-items:center;
	padding:0;
	list-style:none;
	border:1px solid #000;
	background:#f9f9f9;
	padding:10px;
}
.nav a {
	color: #353564;
	font-size: 1.2rem;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
	transition: all 0.3s ease;
	border-bottom: 1px solid transparent;
	padding:0 15px;
}
.logo a {
	width: 170px;
	height: 170px;
	padding:0;
	border-radius: 50%;
    color: #fff;
	text-align: center;
	background: #353564;
	display: flex;
	justify-content: center;
	align-items: center;
}
.nav li:first-child,.nav li:last-child{width:7rem;}
.nav li:first-child{margin-right:auto;}
.nav li:last-child{margin-left:auto;text-align:right;}

@media (max-width: 768px) {
	.nav{flex-wrap:wrap;}
	.logo{order:-1;display:flex;margin:auto 10px;flex:1 0 100%;justify-content:center;}
	.logo a{margin:0 auto 10px;width:100px;height:100px;}
	.nav li:first-child{order:6;}
	.nav li:first-child,.nav li:last-child{width:auto;padding-left:15px;margin:0;text-align:left;}
	.nav li:last-child{margin-left:auto;}
}
@media (max-width: 560px) {
	.nav li:first-child,.nav li:last-child{flex:1 0 100%;margin:0;}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.