Bootstrap navbar-brand above menu until resize and collapse in

Question

I've been searching for an example of this and can't find anything. I'm using regular text as my navbar-brand (no image), but the font is 200-300% and takes up a lot of space. I want to position the name above the menu. However, when the window is resized, I need it to collapse into the center of the nav bar (when the links are collapsed).

Should look something like this:

                             WEBSITE NAME
         link     link1    link2      link3   link4     link5

And collapse into

                             WEBSITE NAME                ==

So, right now this is what I'm using. Centered text with links on the sides, but the links are spilling behind the navbar-brand because of the impractical size.

<nav class="navbar navbar-default navbar-fixed-top" 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>    
    <a class="navbar-brand" href="#">BIG WEBSITE TITLE</a>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-left">
        <li id="nav">LINK for: </li>
        <li id="nav"><a href="#"><i class="fa fa-mars" aria-hidden="true"></i> LINK</a></li>
        <li id="nav"><a href="#"><i class="fa fa-venus" aria-hidden="true"></i> LINK</a></li>
        <li id="nav"><a href="#">LINK</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#">LINK</a></li>
      <li><a href="#">LINK</a></li>
    </ul>
  </div>
</nav>

Some CSS

.navbar-brand
{
    font-size: 200%;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    margin:0 auto;
}
.navbar-toggle {
    z-index:3;
}

@media (min-width: 768px) {
.navbar-brand,
.navbar-nav li a {
    line-height: 70px;
    height: 70px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
    .navbar-nav li {
    line-height: 70px;
    height: 70px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}
    .navbar-brand
    {
    font-size: 300%;
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    vertical-align: middle;
    margin: auto;
}

.navbar{
    background-color: #ZZZZZ;
}

This isn't working at all for me.

Answer 1

This should do it

 @media (min-width: 768px) { .navbar-nav.navbar-center, .navbar-header-center { margin-left: 50%; transform: translateX(-50%); } } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header navbar-header-center"> <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> <a class="navbar-brand" href="#">Brand</a> </div> <div class="clearfix"></div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-center"> <li><a href="#">Link1</a></li> <li><a href="#about">Link2</a></li> <li><a href="#about">Link3</a></li> <li><a href="#contact">Link4</a></li> </ul> </div> </nav> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

Answer 2

So I added this bit of code to css.

.navbar {
  height:100px;
}

.nav.navbar-left{
  bottom: 0;
  left: 0;
  position:absolute;
}

.nav.navbar-right{
  bottom: 0;
  right: 0;
  position:absolute;
}

For this effect: https://gyazo.com/c5ae543c41b4383189e0d65b1869699f

Is that something like you wanted? If not, I apologize.