Twitter Bootstrap 3.0 Logo in the Center of Navbar

Twitter Bootstrap 3.0 Logo in the center of navbar

This has been asked before a few times, like here.

I've set up a jsfiddle similar to your HTML provided, using your Gravatar since your logo wasn't available: http://jsfiddle.net/q68VS/

Important CSS:

.nav-center {
margin:0;
float:none;
}

.navbar-inner{
text-align:center;
}

Vertical align logo inside .navbar-brand with Bootstrap 3

You could add some custom style and set display: flex and align-items: center on navbar-brand element.

.navbar-brand {

display: flex;

align-items: center;

}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-fixed-top navbar-default" role="navigation">

<div class="container-fluid">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a class="navbar-brand" href="#">

Company Name <img src="http://via.placeholder.com/220x36">

</a>

</div>

</div>

</nav>

Centering brand logo in Bootstrap Navbar

Try this:

.navbar {
position: relative;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}

Centering your logo by 50% and minus half of your logo width so that it won't have problem when zooming in and out.

See fiddle

Center bootstrap navbar brand logo

You can try this.

What I did is I created a div(.navbar-logo) that will enclose the .navbar-brand then apply Flexbox to center the logo.

then I implement some CSS to .navbar-toggle to make it positioned.

then set width to .navbar-header to make the alignment in desktop view.

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */

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

body,

html {

height: 100%;

margin: 0;

}

/*=======================================================

Header, footer and navbar

========================================================*/

.navbar-logo{

display:flex;

justify-content:center;

align-items:center;

height:50px;

width:100%;

}

.navbar-toggle{

position:absolute;

top:5px;

right:5px;

}

.navbar-header{

width:100%;

}

.navbar .navbar-nav {

display: inline-block;

float: none;

margin-top: 2em;

font-family: 'Ubuntu', sans-serif;

font-weight: 400;

font-style: normal;

letter-spacing: 5px;

text-transform: uppercase;

font-size: 14px;

}

.navbar {

position: relative;

}

.navbar-shrink .navbar-nav {

display: none;

}

.navbar-shrink.navbar {

height: 6em;

}

.navbar-shrink.navbar>.container>.navbar-header>.navbar-brand img {

width: 250px;

height: 44px;

}

.navbar-default .navbar-nav>li>a {

color: #fff;

font-weight: 300;

}

.navbar-default .navbar-nav>li>a:focus,

.navbar-default .navbar-nav>li>.active {

color: #808ba0;

}

.navbar-default .navbar-nav>li>a:hover {

color: #808ba0;

font-weight: 300;

}

#navbar-header {

transition: 2s ease-in-out;

}

.navbar-default {

background-color: rgba(51, 55, 65, 0.9);

}

.navbar-default.navbar-shrink {

background-color: rgba(51, 55, 65, 0.9);

}

.navbar {

position: relative;

border-radius: 0px;

border: 0px;

height: 10.5em;

-webkit-transition: height 300ms ease-in-out;

-moz-transition: height 300ms ease-in-out;

-o-transition: height 300ms ease-in-out;

transition: height 300ms ease-in-out;

}

.navbar-fixed-top {

position: fixed !important;

}

.navbar-brand img {

width: 250px;

height: 44px;

}

.nav {

text-align: center;

}

.navbar .navbar-collapse {

text-align: center;

}

.dropdown:hover .dropdown-menu {

display: block;

margin-top: 0;

}

.mq-footer {

text-align: center;

font-family: 'Ubuntu', sans-serif;

padding-bottom: 2em;

}

.mq-footer>.container>#footer-copyright {

font-size: 12px;

color: #737373;

}

.footer-icon {

font-size: 25px;

color: #737373;

opacity: 0.5;

padding-top: 1em;

padding-right: 0.25em;

}

.footer-icon:hover {

opacity: 1;

cursor: pointer;

}

#footer-copyright {

margin-top: 2em;

}

#footer-links {

margin-top: 2em;

}

#footer-links ul {

padding-left: 25px;

}

#footer-links ul li {

display: inline;

margin-right: 25px;

}

#footer-links ul li a {

color: #333741;

}
<div class="header" id="navbar-header">

<div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation">

<div class="container">

<div class="navbar-header">

<div class="navbar-logo">

<a class="navbar-brand" href="/">

<img src="http://marquesslondon.herokuapp.com/images/logo.daa5186d.png">

</a>

</div>

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-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>

</div>

<div style="display: block">

<div class="collapse navbar-collapse" id="js-navbar-collapse">

<ul class="nav navbar-nav" id="navbar">

<li><a href="/">HOME</a></li>

<li class="dropdown">

<a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>

<ul class="dropdown-menu">

<li><a href="/process">Process</a></li>

<li><a href="/look">Our Look</a></li>

</ul>

</li>

<li><a ng-href="/lifestyle">LIFESTYLE</a></li>

<li><a ng-href="/story">STORY</a></li>

<li><a ng-href="/contact">GET IN TOUCH</a></li>

</ul>

</div>

</div>

</div>

</div>

</div>

How can I center Twitter-Bootstrap 3 navbar links?

Bootstrap 3 has a nav-justified class that can be used on nav. No extra CSS required:

<div class="container">
<h3 class="text-muted">Project name</h3>
<ul class="nav nav-justified">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Demo: http://bootply.com/72519


Based on the comments, to have full-width centered links using the navbar-nav class, use flexbox...

.navbar-center {
width:100%;
display: flex;
}
.navbar-center>li {
flex:1 1 auto;
}

<div class="navbar navbar-default">
<div class="container">
<ul class="nav navbar-nav navbar-center text-center">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">More</a></li>
<li><a href="#">Options</a></li>
</ul>
</div>
</div>

https://www.codeply.com/go/6ZE3obnpuP


Also see
Bootstrap NavBar with left, center or right aligned items

Center Navbar in Bootstrap

Navbar with centered logo

Use flex on the parent for the 3 header items, set each header item to flex-grow: 1; and flex-basis: 0 (or flex: 1 0 0) to have them evenly take up 1/3rd of the overall header, give .left an order: -1 to put it at the beginning of the row, then use align-items: center on the flex parent to center the items vertically. You could also use bottom or baseline if you would rather it be bottom aligned. You can read more about flex options here - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

/**

GENERAL

*/

body {

font-family: 'Roboto', sans-serif;

}

/**

NAVIGATION BAR

*/

.navbar {

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);

}

/* center */

.navbar .center {

position: relative;

/* width: 100%; */

text-align: center;

float: none;

/* height: 100px; */

/* margin-top: auto; */

}

/*

margin-top: 1.33em;

}*/

.navbar .center a,

img {

color: black;

text-decoration: none;

font-family: 'Abril Fatface', cursive;

transition: 0.3s ease;

-webkit-transition: 0.3s ease;

-moz-transition: 0.3s ease;

}

.navbar .center a:hover,

img:hover {

opacity: .5;

}

/* left */

.navbar ul {

list-style: none;

line-height: 1.85714286em;

position: relative;

}

.navbar .left a {

float: left;

color: black;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.navbar li {

transition: 0.3s ease;

-webkit-transition: 0.3s ease;

-moz-transition: 0.3s ease;

}

.navbar li:not(:hover):not(.active) {

opacity: .5;

}

/* right */

.navbar .right a {

margin-left: 16px;

float: right;

}

.navbar > .container {

display: flex;

align-items: center;

}

.navbar > .container > div {

flex: 1 0 0;

}

.navbar .left {

order: -1;

}
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Blog Layout</title>

<meta name="description" content="">

<meta name="author" content="">

<!-- Fonts -->

<!-- Main Font-->

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<!-- Logo Font-->

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">

<!-- Bootstrap -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">

</head>

<body>

<header class="navbar hidden-sm-down">

<div class="container">

<div class="center">

<h4 href="#">

<a href="#">Test Blog.</a>

</h4>

</div>

<div class="left">

<ul>

<li class="active">

<a href="#">Home</a>

</li>

<li>

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

</li>

<li>

<a href="#">Contact</a>

</li>

</ul>

</div>

<div class="right">

<a class="btn btn-primary" href="#" role="button">Register</a>

<a class="btn btn-secondary" href="#" role="button">Login</a>

</div>

</div>

</header>

</body>

</html>


Related Topics



Leave a reply



Submit