CSS align challenge - css

Question

I'm using a bootstrap 3.3.7 navbar with 3 groups of items :
A) on the left (1 item),
B) centered (4 items),
C) on the right (1 item)
So I have :
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav tabs">
<!-- A) here are the left aligned LIs (float: left) -->
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- C) here are the right aligned LIs (float: right) -->
</ul>
<ul class="nav navbar-nav navbar-center tabs">
<!-- B) here are the right aligned LIs (float: none; text-align: center; font-size:0) -->
</ul>
</div>
</nav>
As asked in the comments, here is my CSS :
.navbar-nav > li {
float: left;
position: relative;
}
.navbar-right {
float: right!important;
margin-right: -15px;
}
.navbar-nav.navbar-center {
float: none;
text-align: center;
font-size: 0;
}
.navbar-nav.navbar-center > li {
vertical-align: top;
display: inline-block;
float: none;
font-size: 1.3rem;
}
Here is a JSFiddle showing it : https://jsfiddle.net/m5s8ov8j/ (please drag'n drop the JSFiddle centered vertical separator to the left to see the result as Bootstrap turns the nevbar into a hamburger menu).
Now I'm asked to insert a new group of 2 items between groups (B) and (C) with 2 conditions :
group (B) (centered) must remain centered,
the new group must be centered between the LAST item of (B) and the FIRST item of (C).
How can I do so ?

Answer 1

I don't think it can be done with CSS alone, but here's a solution with JavaScript. Position the new UL absolutely, then determine what its location should be.
I put this in the onresize event, so that the location will remain correct when the user makes the window wider or narrower.
window.onresize = function() {
var cenUL = document.querySelector('.navbar-default .navbar-collapse ul.navbar-center li:last-child');
var rightUL = document.querySelector('.navbar-default .navbar-collapse ul.navbar-right li:first-child');
var newUL = document.getElementById('new');
newUL.style.left = ((cenUL.offsetLeft+cenUL.offsetWidth+rightUL.offsetLeft-newUL.offsetWidth)/2)+'px';
};
window.onresize();
.navbar-nav.navbar-center {
float: none;
text-align: center;
font-size: 0;
}
.navbar-nav.navbar-center > li {
vertical-align: top;
display: inline-block;
float: none;
font-size: 1.3rem;
}
#new {
position:absolute;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav tabs">
<li>
MyWebsite
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Menu
</li>
</ul>
<ul id="new" class="nav navbar-nav">
<li>NEW!</li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li>
Company
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>

Answer 2

If you just need to make a area visible on xs, you can use bootstrap responsive classes
Bootply
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav tabs">
<li>
MyWebsite
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
Menu
</li>
</ul>
<ul class="nav navbar-nav navbar-right visible-xs"> // <-- HERE
<li>
New Group Item 1
</li>
<li>
New Group Item 2
</li>
</ul>
<ul class="nav navbar-nav navbar-center">
<li>
Company
</li>
<li>
Products
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>