How can I center brand above nav bar using Bootstrap v3 and hide it while on mobile?

Question

Thanks for taking the time to read this. I've been struggling with centering an two images, the text and logo, above the navbar. Below are some photos and current code. **DISCLAIMER: the text in the image is not centered.

Here is what I'm currently working with: https://jsfiddle.net/rw9domy1/

    .logo , .navbar-brand {
    position: relative;
    top: 50%;
    left:50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.logo-text {
    margin-top:10px;
}

My goal is to stack both the 'text' and 'logo' image above the menu items, '1-8'. I'm attempting then to center them, which I tried using various different methods but none seemed to work, and I'm assuming it has to do with Bootstrap's CSS. Various people have seemed to center their brand but have the dropdown menu items to the left or right of brand not below.

I also want to hide 'text' when on mobile, so that the logo is centered left of the "hamburger" icon. I'm familiar with @media, and may use this.

Answer 1

See if this helps. You have to create a div above where your nav component begins.

.navbar-brand.center-block {
  padding-left: 50%;
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
}
.navbar .navbar-nav > li > a {
  margin-bottom: -5px;
}
.navbar .navbar-collapse {
  text-align: center;
}
div.navbar-brand {
  padding-left: 47%;
}
@media screen and (max-width: 768px) {
  .navbar-brand.center-block {
    float: right;
  }
  .navbar .nav {
    padding-left: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 hidden-xs"> <a class="navbar-brand center-block" href="#">Text</a>

    </div>
    <div class="col-sm-12 hidden-xs"> <a class="navbar-brand center-block" href="#">Logo</a>

    </div>
  </div>
</div>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand visible-xs" href="#">Logo</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">2</a>

        </li>
        <li><a href="#">3</a>

        </li>
        <li><a href="#">4</a>

        </li>
        <li><a href="#">5</a>

        </li>
        <li><a href="#">6</a>

        </li>
        <li><a href="#">7</a>

        </li>
        <li><a href="#">8</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>