Bootstrap Navbar - align items to the middle - Twitter bootstrap

senty
December 13, 2016
176 views
0 votes
2 Answers

I am trying to create a navbar with Bootstrap, with ‘navbar-brand’ on the left, navbar items centered in the middle, and 2 items on the right too. First I tried to make it from scratch but I couldn’t achieve making it responsive enough.

Then, I found this approach on Bootply, which is really close to the one I want with all responsiveness and navbar collapsing. However, I want to swap navbar-brand and left items; brand to be on the left, with left items in the middle; and right items keep their position.

[ Navbar-Brand            Home | About | Contact | Address            Right, Right]

What is the best, most convenient way to achieve it?

Here is the Snippet:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-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>    
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

Answers

You can use CSS Positioning on .navbar-left and make it in the center using CSS transform (limit it to be on tablets & desktop so that it would not affect mobile layout).

Have a look at the snippet below (use full screen):

.navbar-brand {
  position: absolute;
  width: auto;
  left: 15px;
  text-align: center;
  margin:0 auto;
}

.navbar-toggle {
  z-index:3;
}

/* On Tabs & Desktops */
@media screen and (min-width: 768px) {
  .navbar-left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-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>    
    <a class="navbar-brand" href="#">Brand</a>
  </div>
  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-left">
        <li><a href="#">Left</a></li>
        <li><a href="#about">Left</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#about">Right</a></li>
      <li><a href="#contact">Right</a></li>
    </ul>
  </div>
</nav>

Hope this helps!

You can also try this:

@media screen and (min-width: 768px) {
    .navbar-collapse {
        position: relative;
    }
    .navbar-left {
        position: absolute;
        width: 100%;
        text-align: center;
        top: 0;
        left: 0;
    }
    .navbar-left > li > a {
        display: inline-block;
    }
    .navbar-left > li {
        display: inline;
        float: none;
    }
}

Codepen: https://codepen.io/anon/pen/GNYNey

Please signup or login to give your own answer.

Click here to cancel reply.

Bootstrap Navbar – align items to the middle – Twitter bootstrap

Answers