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
Font Smoothing Techniques? Text-Shadow Rendering Differently in Chrome 14.0.833.0 or Higher
How to Make a Transparent Border with CSS
Css3 Animation Is Not Working in Ie11 But Works in Other Browsers
Can You CSS Blur Based on a Gradient Mask
Is CSS Faster When You Are Specific
Angular - Material: Progressbar Custom Color
How to Make One Circle Inside of Another Using CSS
All About Choosing the Right Font for a Website
Match Colors in Fecolormatrix Filter
I Need a Max-Margin CSS Property, But It Doesn't Exist. How Could I Fake It
How to See the CSS Files Loaded in a Page in Google Chrome
Set Margin (Indent) Based on Counter Value in CSS
How to Use CSS Media Query to Scale Background-Image to Viewing Window