positioning elements in bootstrap navbar - css

Question

I have spent already several hours trying to correctly position several elements in a fixed bootstrap navbar, but I do not manage to have exactly what I would like. This is what I have so far:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="http://www.aprentiko.com">brand</a>
<p class="navbar-text">title of the page</p>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav navbar-right">
<li></span></li>
<li><span class="glyphicon glyphicon-cog"></span></li>
<li></span></li>
</ul>
</div>
<div class="navbar-header pull-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav">
<li><span id="audioInPause" class="glyphicon glyphicon-play"></span></li>
</ul>
</div>
</div>
</nav>
The problems I have are the following:
I would like to position the "title of the page" element in the middle of the screen, but it always stays in the left, next to the brand.
The audioControl item should be independent of the other icons in the right side (i.e. it should not collapse when the viewport becomes too small. I achieved the "not collapsing" part, but when the icons collapse I get a) the play button always goes in a second row, b) clicking on the collapsed button activates the play button, instead of opening the menu to select one of the collapsed items.
I created a jsfiddle at https://jsfiddle.net/cwx1wvo7

Answer 1

I can answer the first one quickly, but I don't know if it will work with collapse, you can play around.
I agree with the comment above about by MattD. As a twist, partition your nav using col-lg-xx col-md-xx etc then use text-center
As an example to give you and idea,
<div class="navbar-header pull-left col-lg-10 col-md-9">
<a class="navbar-brand" href="http://www.aprentiko.com">brand
<p class="text-center navbar-text">title of the page</p>
</a>
</div>
<div class="collapse navbar-collapse navbar-right col-lg-2 col-md-3">

Answer 2

in fact, u should take a look at the bootstap.css to have an idea of the classes used to code elements.
the ms-md-auto move ur elements to the right:
.ms-md-auto {
margin-left: auto !important;
}
<ul class="navbar-nav ms-md-auto mb-2 mb-lg-0" >