How do I center a Bootstrap nav bar with a brand image inbetween nav links?

Question

So I've designed a mock website layout for a made up company so I can test my skills at Twitter's Bootstrap 3 but I'm having problems relaying what I've designed on photoshop to code.

I'm trying to get the whole navbar content centered, with links at either side of the brand logo. I've checked online, google, stackoverflow and more, however I can't seem to get it anywhere near what I've designed! I'm having a hard time getting my head around it. It seems like it should be simple, and I've just overthought it's complexity! The links need to be center to the image, but also center in the navbar itself. The layout as such:

[link] [link] [LOGO] [link] [link]

Here's an image of the mentioned design:

See [this question](http://stackoverflow.com/q/23400234/2976720), where these two answers could solve your problem: [answer 1](http://stackoverflow.com/a/23400451/2976720), [answer 2](http://stackoverflow.com/a/23412513/2976720) — B_s, Aug 23 '15 at 13:25
@Bastiaan Thanks! I've already looks at those both, however the links seem to be set to the far left and right of the brand rather than centred with the brand logo. — Ross W Simpson, Aug 23 '15 at 13:31
http://stackoverflow.com/questions/21473939/wrap-bootstrap-navbar-list-items-around-centered-brand-image — Roope, Aug 23 '15 at 13:57
possible duplicate of [How can I center a brand image with other elements in Bootstrap 3.2's navbar?](http://stackoverflow.com/questions/24924170/how-can-i-center-a-brand-image-with-other-elements-in-bootstrap-3-2s-navbar) — vanburen, Aug 23 '15 at 14:32
Hey @vanburenx, thanks for that link! From that question there was [this Bootply](http://www.bootply.com/oJI0QzytvR). I've managed to get this so far [Bootply](http://www.bootply.com/jmmJpFJw33#) but the li text links don't seem to be centered vertically? Any ideas? Thanks! — Ross W Simpson, Aug 23 '15 at 16:33
@RossWSimpson - Is this what you are looking for [**jsFiddle**](https://jsfiddle.net/p9q16fek/) ? — DavidDomain, Aug 23 '15 at 17:06
@DavidDomain Hey David! That is exactly that! Yes! Is there a way to get that centered when the text is all different lengths? The logo seems off center when you enter the link titles. Also can you explain what you did? Thank you so much! — Ross W Simpson, Aug 23 '15 at 17:23

score 1 · Answer 1 · answered Aug 23 '15 at 16:29

You can also try flexbox display. In order to implement it, you will have to:

add the display: flex property to the parent element of the elements that you need to align (in this case: on the <ul> element in the navbar, which contains the list of navigation links and the brand image)
set margin: auto for the elements you need to align (in this case: on the <li> elements)

Optional: if you don't want your elements to show up in a row (default bahavior), adjust the value of the flex-direction property. E.g. if you want to have the elements listed vertically, add flex-direction: column; to the <ul> element.

Here is a sample code, with two different image-placements: on-top of the list for mobile devices and in the middle of the row for small devices and above.

    HTML:
    ...
    <nav class="container">
        <div class="row visible-xs text-center">
            <div class="col-xs-12">
                <a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <ul class="text-center">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">Our Food</a></li>
                    <li class="hidden-xs"><a href="#"><img src="images/logo.png" alt="BLUE|BERY"/></a></li>
                    <li><a href="#">Book a Table</a></li>
                    <li><a href="#">Promotions</a></li>
                </ul>
            </div>
        </div>
    </nav>
    ...

    CSS:
        body {background-color: #333333;}
        nav {background-color: #000000;}
        nav ul {
            display: flex; 
            list-style-type: none; 
            padding-left: 0;  //in order to eliminate Bootstrap's built-in 40px padding
        }
        nav ul > li {margin: auto;} //N.B. don't alter the margin property, if you want some further adjustments, use padding!
        nav ul > li > a:link, :visited, :hover, :active {
            color: #ffffff; 
            text-decoration:none;
        }
        @media all and (max-width:767px) {
            nav a > img {margin: 20px auto;}
            nav ul {flex-direction: column;} //only if you want to change the default direction
        }

Thanks for your response! I couldn't manage to get your code working with mine, however I did manage to do [this](http://www.bootply.com/jmmJpFJw33#) but now the links are not vertically aligned with the image grr. Thanks for your help though! — Ross W Simpson, Aug 23 '15 at 16:55
Yes, flex display is quite sensitive, it doesn't like to be mixed in with others. :) — Arpad Pacsa, Aug 23 '15 at 17:29
Hey, Ross, I created a jsfiddle here: (https://jsfiddle.net/Rpad/syrucoh6/), where you can see the effect of this code. It's responsive, so you have to stretch the result window a bit to see the effect. Is this what you were intended to achieve? — Arpad Pacsa, Aug 23 '15 at 17:53

score 1 · Accepted Answer · answered Aug 23 '15 at 18:05

To center the floated navbar-nav you can use relative position and negative left, right values on the navbar-nav itself and on the list items or child elements.

To make sure that the logo is always centered you may think about not using a nav-justified but a regular navbar-nav with a fixed value for left and right padding on the anchor tags, but with individual values for different screens.

To get the vertical alignment working just add the appropriate line-height to the anchor tags.

I have decided to hide the actual navbar-brand and only show it on sx breakpoint. For the centered logo it is the other way around, so we do not have the logo inside the collapsed nav. Just look at the example and i am sure you will get the idea.

Here is the example.

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");

.navbar {
  background-color: #231f20;
  min-height: auto;
  position: relative;
  top: 0px;
  font-size: 13px;
  width: auto;
  border-bottom: none;
  margin-bottom: 0px;
  padding: 40px 0px;
}
.navbar-brand {
  padding: 0 15px;
  height: 96px;
}

@media (min-width: 768px) {
  .navbar-nav {
    position: relative;
    right: -50%;
  }
  .navbar-nav > li {
    position: relative;
    left: -50%;
  }
  .navbar-nav > li a {
    line-height: 126px;
    vertical-align: middle;
    padding: 0 24px;
  } 
}

@media (min-width: 992px) {
  .navbar-nav > li a {
    padding: 0 48px;
  } 
}

@media (min-width: 1200px) {
  .navbar-nav > li a {
    padding: 0 68px;
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <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>
            <a class="navbar-brand hidden-sm hidden-md hidden-lg" href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">Who We Are</a></li>
                <li><a href="#">Our Food</a></li>
                <li class="hidden-xs"><a href="#"><img src="http://i.imgur.com/SC9LKtA.png" alt="Brand" width="180" /></a></li>
                <li><a href="#">Book a Table</a></li>
                <li><a href="#">Promotions</a></li>
            </ul>
        </div>
    </div>
</nav>

Absolute spot on answer, thank you David! – Ross W Simpson Aug 23 '15 at 18:50 — Ross W Simpson, Aug 23 '15 at 18:50
Sure, no problem. Happy coding. – DavidDomain Aug 23 '15 at 19:04 — DavidDomain, Aug 23 '15 at 19:04

How do I center a Bootstrap nav bar with a brand image inbetween nav links?

2 Answers2