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>bootstrap 3 - how do I place the brand in the center of the navbar?
css:
.navbar-header {
float: left;
padding: 15px;
text-align: center;
width: 100%;
}
.navbar-brand {float:none;}
html:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
Bootstrap navbar logo in the center and items to the left und right
You can use pull-right class to align the items to the right, but it need few more modifications to work correctly.I have created a clean solution with the links that you provided.Enjoy!
body { background-color: blueviolet !important; }.navbar { position: relative; top:10px; }
.brand { position: absolute; left: 50%; margin-left: -50px !important; display: block; }<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<!--If you want to add background image add it to the class below--> <div class="container-fluid"><!--add this line--> <div class="row"><!--add this line--> <div class="col-md-12"><!--add this line--> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="brand" style="margin: 0; float: none;" href="#"> <!--add logo source--> <img src="icon.png" alt="logo" title="logo" height="100" with="50" /> </a> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"><a href="#" class="nav-link">Status</a></li> <li class="nav-item"><a href="#" class="nav-link">Download</a></li> <li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li> <li class="nav-item"><a href="#" class="nav-link">Teamspeak</a></li> </ul> <ul class="navbar-nav pull-right"> <li class="nav-item"><a href="#" class="nav-link">Teamspeak Bot</a></li> <li class="nav-item"><a href="#" class="nav-link">Travel</a></li> <li class="nav-item"><a href="#" class="nav-link">Plex</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div> </div> </nav> </div><!--add this line--> </div><!--add this line-->
<!--New Row for the main content--> <div class="row"> <div class="col-md-12"> <!--Main content--> </div> </div> </div><!--add this line-->Bootstrap 4 Navbar align logo center and toggle icon on the left
The Bootstrap 4 Navbar uses flexbox, so it's possible to achieve this without extra CSS. You will need an empty spacer div to keep the logo centered.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="collapse navbar-collapse w-100 order-1 order-lg-0" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="d-flex w-100 order-0">
<div class="w-100">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<a class="navbar-brand text-center w-100" href="#">Navbar</a>
<span class="w-100"></span>
</div>
<span class="w-100"></span>
</nav>
Toggler left, brand center:
https://www.codeply.com/go/VfuMAtIoXi
Related:
How to center nav-items in Bootstrap?
Bootstrap NavBar with left, center or right aligned items
How do I center a Bootstrap nav bar with a brand image inbetween nav links?
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>Related Topics
How to Write a CSS Hack For Ie 11
How to Make a Sticky Footer Using Css
How to Set Up Fixed Width For ≪Td≫
How to Include One CSS File in Another
Css Specificity, Media Queries and Min-Width
Universal Selector * and Pseudo Elements
Changing the Width of Bootstrap Popover
Float Right and Position Absolute Doesn't Work Together
Ie8 Display Inline-Block Not Working
Using Rails 3.1 Assets Pipeline to Conditionally Use Certain Css
Downloading a Google Font and Setting Up an Offline Site That Uses It
How to Make a Footer Fixed in the Page Bottom
CSS - Center Two Images in CSS Side by Side
iOS 7 iPad Safari Landscape Innerheight/Outerheight Layout Issue