CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Christian Dimas
Christian Dimas

Reputation: 117

Centering navbar-brand image with centered navbar

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>

Upvotes: 2

Views: 2007

Answers (4)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

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

Upvotes: 0

SW4
SW4

Reputation: 71140

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>

Upvotes: 0

kapantzak
kapantzak

Reputation: 11750

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>

Upvotes: 1

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

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.

Upvotes: 0

Related Questions