Centering navbar-brand image with centered navbar

Question

I'm just learning Bootstrap 3 and I want to use that in my website so it's still comfortable to access from mobile devices.

I want to achieve something like this:

enter image description here

but this is as far as I get. This is the code: jsfiddle

.navbar-brand {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    text-align: center;
    margin: auto;
    height:30px;
}

.navbar-brand:hover,
.navbar-brand:focus {
   text-decoration: none;
}

.navbar-brand > img {
   display: inline-block;
   margin:auto;
}

@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}

.navbar .divider-vertical {
   height: 50px;
   margin: 0 9px;
   border-right: 1px solid #ffffff;
   border-left: 1px solid #f2f2f2;
}

.navbar-inverse .divider-vertical {
   border-right-color: #222222;
   border-left-color: #111111;
}

@media (max-width: 767px) {
  .navbar-collapse .nav > .divider-vertical {
     display: none;
  }
}

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
  
   <div class="navbar navbar-default navbar-static-top">
     <div class="container">    
       <a href="#" class="navbar-brand"><img src="image/nav_logo.png"/></a> 
       <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
       </button>   
       <div class="collapse navbar-collapse navHeaderCollapse">    
      <ul class="nav navbar-nav navbar-left">
     <li class="active"><a href="#">Home</a></li>
     <li class="divider-vertical"></li>
     <li><a href="#">Product</a></li>
      </ul>    
      <ul class="nav navbar-nav navbar-right">
     <li><a href="#">About</a></li>
     <li class="divider-vertical"></li>
     <li><a href="#">Contact</a></li>
      </ul>    
       </div> 
    </div>
 </div>
 <div class="navbar navbar-inverse navbar-fixed-bottom">
 <div class = "container">
  <div class="social">
     <a class="pull-left icon" href="#" data-icon = "f"></a>
     <a class="pull-left icon" href="#"  data-icon = "i"></a>
  </div>
 </div>
</div> 
</body>
</html>

score 1 · Answer 1 · answered Dec 30 '14 at 08:21

I would have done this:

nav {
  width: 100%;
}
.img-holder {  
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background-color: red;
  position: relative;
}
ul,li {margin:0;padding:0;}
ul {
  width: 304px;
  position: absolute;
  top: 20px;
}
li {
  width: 150px;
  text-align: center;
  float: left;
  display: inline-block;
  border: 1px solid #d8d8d8;
}
.left-ul {
  left: 50%;
  margin-left: -350px;
}
.right-ul {
  right: 50%;
  margin-right: -350px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="img-wrapper">
  <ul class="left-ul">
     <li>ABOUT</li>
    <li>PRODUCT</li>
  </ul>
  <div class="img-holder"></div>
  <ul class="right-ul">
     <li>BLOG</li>
    <li>CONTACT</li>
  </ul>
</div>
</nav>

score 0 · Answer 2 · edited May 23 '17 at 12:22

0

I haven't tried it myself but you could try using input group classes: bootstrap: align input with button.

In general, if you know the height of a block element, if you set its line height to that height you'll get one line that is centered vertically in that space; just watch out for items going to two lines or more, then it breaks.

edited May 23 '17 at 12:22

Community

1
1

answered Dec 30 '14 at 08:17

Nathaniel Flick

2,902
2
22
31

SW4 · Answer 3 · 2014-12-30T08:32:25.273

You will need to make a few changes to both your CSS and HTML.

HTML-wise, make all the items (inlcluding the image), navbar li items and remove the left and right navbar classes.

Then you will need to center the navbar using in its uncollapsed state by applying text-align on the parent and unfloating the children, using:

@media (min-width: 768px) {
    .navbar .navbar-collapse {
        text-align: center;
    }
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }    
}

Demo Fiddle

.navbar-brand {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  margin: auto;
  height: 30px;
}
.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}
.navbar-brand > img {
  display: inline-block;
  margin: auto;
}
@media (min-width: 768px) {
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
  }
}
.navbar .divider-vertical {
  height: 50px;
  margin: 0 9px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
  border-right-color: #222222;
  border-left-color: #111111;
}
@media (max-width: 767px) {
  .navbar-collapse .nav > .divider-vertical {
    display: none;
  }
}
@media (min-width: 768px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }
  .navbar .navbar-collapse {
    text-align: center;
  }
}

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


<div class="navbar navbar-default navbar-static-top">
  <div class="container">
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>

    </button>
    <div class="collapse navbar-collapse navHeaderCollapse ">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>

        </li>
        <li class="divider-vertical"></li>
        <li><a href="#">Product</a>

        </li>
        <li>
          <a href="#" class="navbar-brand">
            <img src="image/nav_logo.png" />
          </a>

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

        </li>
        <li class="divider-vertical"></li>
        <li><a href="#">Contact</a>

        </li>
      </ul>
    </div>
  </div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container">
    <div class="social">
      <a class="pull-left icon" href="#" data-icon="f"></a>
      <a class="pull-left icon" href="#" data-icon="i"></a>

    </div>
  </div>
</div>

score 0 · Accepted Answer · edited Jun 19 '16 at 21:22

0

Just add this to your css

.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    max-width: 480px; /**change the max width to what ever you want you can add it in media query too*/
    margin: 0 auto;  /**center the menu*/
}

live Demo

edited Jun 19 '16 at 21:22

marc_s

732,580
175
1,330
1,459

answered Dec 30 '14 at 08:23

Gildas.Tambo

22,173
7
50
78

Centering navbar-brand image with centered navbar

4 Answers4

Demo Fiddle