Ok assuming the html has to remain the same (apart from a couple of extra classes) then you can do it like this but relies on magic numbers a bit.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/*
####################################################
MAIN NAV
####################################################
*/
.logo {
width: 170px;
height: 170px;
border-radius: 50%;
/* font-size: 20px; */
color: #fff;
line-height: 100px;
text-align: center;
background: #353564;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
position: relative;
top: -8px;
}
.main-nav {
position: sticky;
top: 0;
z-index: 1000;
padding: 10px 15px;
}
.main-nav .navbar {
padding: 40px 15px
}
.main-nav .navbar li.nav-item:first-of-type {
padding-left: 0
}
.main-nav .navbar li.nav-item {
padding-left: 25px
}
.main-nav .navbar li.nav-item a {
padding: 0;
color: #353564;
font-size: 18px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
transition: all 0.3s ease;
border-bottom: 1px solid transparent
}
.main-nav .navbar li.nav-item a:hover {
border-bottom: 1px solid #fff
}
/* Main nav */
@media (min-width: 990px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.midnav{margin-right:90px}/* half logo size */
.midnav2{margin-left:90px}/* half logo size */
.telephone,.cta{width:7rem;}
.cta{text-align:right;}
}
</style>
</head>
<body>
<!-- MAIN NAV -->
<div class="container-fluid main-nav ">
<div class="row">
<div class="container">
<nav id="topNav" class="navbar navbar-expand-lg">
<div class="navbar-brand mx-auto logo"> <a href="#"> LOGO </a> </div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Menu</span> <i class="fas fa-bars"></i> </button>
<div class="navbar-collapse collapse">
<div class="telephone mr-auto">Call us today</div>
<ul class="navbar-nav midnav">
<li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link 2</a> </li>
</ul>
<ul class="navbar-nav midnav2">
<li class="nav-item"> <a class="nav-link" href="#">Link 3</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link 4</a> </li>
</ul>
<div class="cta ml-auto">CTA</div>
</div>
</nav>
</div>
</div>
</div>
<!-- end MAIN NAV -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
The [point being is that as the logo is absolutely placed to the middle then you need to create space for it using the same measurement as the logo. I’ve used a 90px margin on each side of the ul that sits to the side of the logo and that preserves the space.
Note that because your telephone and cta elements are different widths (because they are content width) then there is no way to centre the 4 links in the middle of the page while having variable width content at either end. This is an issue that has never properly been solved via css in that elements are generally centred as a block so you can’t centre one element and then have variable width content either side and keep all in the normal flow.
The answer to this in the code above is simply to give the left and right items the same width and then the whole nav will centre properly.
Using the code I have shown above will result in this display.
I have not addressed the small screen layout as I assume this is a work in progress.
As I said in the other post if bootstrap was not being used I would have made this as one list with the logo as the middle list item and then it all becomes simpler.
We can make it a little simpler in bootstrap if you don;t mind changing the html a little.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
/*
####################################################
MAIN NAV
####################################################
*/
.logo {
width: 170px;
height: 170px;
border-radius: 50%;
/* font-size: 20px; */
color: #fff;
line-height: 100px;
text-align: center;
background: #353564;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
position: relative;
top: -8px;
}
.main-nav {
position: sticky;
top: 0;
z-index: 1000;
padding: 10px 15px;
}
.main-nav .navbar {
padding: 40px 15px
}
.main-nav .navbar li.nav-item {
padding:0 12px
}
.main-nav .navbar li.nav-item a {
padding: 0;
color: #353564;
font-size: 18px;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
transition: all 0.3s ease;
border-bottom: 1px solid transparent
}
.main-nav .navbar li.nav-item a:hover {
border-bottom: 1px solid #fff
}
/* Main nav */
@media (min-width: 990px) {
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.midnav {margin-right:90px}/* half logo size */
.midnav2 {margin-left:90px}/* half logo size */
.telephone, .cta {width:7rem;}
.cta {text-align:right;}
#topNav .navbar-nav{flex:1 0 0;}
}
</style>
</head>
<body>
<!-- MAIN NAV -->
<div class="container-fluid main-nav ">
<div class="row">
<div class="container">
<nav id="topNav" class="navbar navbar-expand-lg">
<div class="navbar-brand mx-auto logo"> <a href="#"> LOGO </a> </div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span>Menu</span> <i class="fas fa-bars"></i> </button>
<div class="navbar-collapse collapse">
<ul class="navbar-nav">
<li class="telephone mr-auto">Call us today</li>
<li class="nav-item"> <a class="nav-link" href="#">Link 1</a> </li>
<li class="nav-item midnav"> <a class="nav-link" href="#">Link 2</a> </li>
<li class="nav-item midnav2"> <a class="nav-link" href="#">Link 3</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Link 4</a> </li>
<li class="cta ml-auto">CTA<li>
</ul>
</div>
</nav>
</div>
</div>
</div>
<!-- end MAIN NAV -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
The logo is still absolutely placed, which I don’t like, but I understand that it’s because the bootstrap brand and toggle effect create the dropdown nav on smaller screens so they must remain separate or else you have to build your own toggle menu effects.
Just to show how simple it can be outside of bootstrap here’s a quick demo.
The html is just this:
<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>
Of course you’d have to build your own drop down and toggle menus etc