Wrap Bootstrap navbar list items around centered brand image
You could just move the image into the center of the list, either with the backend or with javascript:
<script>
var $nav = $('.nav li');
var $middle = $nav.eq(Math.ceil($nav.length/2));
var $liWrappedImg = $('<li></li>').append($('.brand'));
$middle.before($liWrappedImg);
</script>
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>Center brand in navbar with items on each side
I found a solution! This is quite similar to what I did first, but I added CSS that will make it work on mobile devices too.
Firstly, I simply added a menu item between my other menu items
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li class="logo"><a href="#"><img src="img/logo.png"></a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#contact">Something</a></li>
</ul>
</div><!--/.nav-collapse -->
like so. I also kept the normal brand that is default in the bootstrap navbar, but added the visible-xs class to make it visible on lower resolutions only
<a class="navbar-brand visible-xs" href="#"><img src="img/logo.png"></a>
Then I have the following CSS to support it. All it does is simply hide the logo from the navigation and display the default branding instead
@media (max-width: 768px) {
.navbar-nav .logo {
display:none;
}
}
.navbar-nav .logo {
opacity: 1;
vertical-align: middle;
}
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
Bootstrap 4 - Responsive + Centred & Word Wrapped navbar-brand
replace you navbar-brand css to this code below. and remove .text-wrap class to make it work
.embelem{ height:40px; width:40px;}.navbar-brand { padding-top: .3125rem; padding-bottom: .3125rem; margin-right: 1rem; font-size: 1.25rem; line-height: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; display: block; width: 50%; min-width: 1px;}
@media (min-width: 768px) { .abs-center-x { position: absolute; left: 50%; transform: translateX(-50%); text-align:center; } #title { padding: 13px }}<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light"> <picture class="embelem"> <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp"> <source srcset="https://lucas-testing.000webhostapp.com/images/embelem.png" class="embelem" alt="Embelem" type="image/png"> <img src="https://lucas-testing.000webhostapp.com/images/embelem.webp" class="embelem" alt="Embelem" type="image/webp"> </picture> <a id="title" class="sticky-top navbar-brand abs-center-x" style="color: #818181;" href="./">The City of Truro Mariners</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="./index">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="./members page">Members page</a> </li> <li class="nav-item"> <a class="nav-link" href="./contact us">Contact us</a> </li> <li class="nav-item dropdown" style="cursor:pointer"> <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Extra's</a> <div id="dropdownSlider" class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="./release/index">App Download</a> <a class="dropdown-item" href="./links">Links</a> <a class="dropdown-item" href="./dates for the diary">Dates for the diary</a> </div> </li> </ul> </div> </nav>Bootstrap navbar links and nav brand centered
Is this what you wanted?
@media (min-width: 768px) { .navbar-nav.navbar-center, .navbar-header-center { margin-left: 50%; transform: translateX(-50%); }}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-default" role="navigation"> <div class="navbar-header navbar-header-center"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="clearfix"></div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-center"> <li><a href="#">Left</a></li> <li><a href="#about">Left</a></li> <li><a href="#about">Right</a></li> <li><a href="#contact">Right</a></li> </ul> </div> </nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>How can I center a brand image with other elements in Bootstrap 3.2's navbar?
If you're happy to use Bootstrap's Responsive Utilities and just stick the logo in two places, you could show/hide the logo depending on screen size like this.
In order to horizontally center Bootstrap's nav list items, which are floated by default, you could either wrap the entire list in a relatively positioned div, or remove the floats and apply display: inline-block. In the example I've given, I've used the relatively positioned div and then cleared it at the same media breakpoint as when the mobile menu appears because I think it's a bit simpler.
CSS
#nav-wrapper {
float: left;
position: relative;
left: 50%;
}
.navbar-nav {
position: relative;
left: -50%;
}
@media (max-width: 769px){
.navbar-inverse .navbar-brand img {
height: 100%;
}
.navbar-inverse .navbar-brand {
padding: 0;
}
#nav-wrapper {
float: none;
position: static;
}
.navbar-nav {
position: static;
}
}
Bootstrap 4 center navbar brand with collapse
Currently in alpha 6, the collapse only supports a single target..
Update Bootstrap 4.1
You can absolute position the brand on larger screens, and use a single collapse for the 2 navbars.
@media (min-width: 768px) {
.navbar-brand
{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
}
http://www.codeply.com/go/Sh05HDqIh1
Also see:
Center an element in Bootstrap 4 Navbar
How to center nav-items in Bootstrap?
Controlling wrapping on Bootstrap 4 responsive navbar
You can accomplish this by setting a minimum width on the navbar and a maximum width for the navbar-brand.
.navbar{
min-width: 255px;
}
.navbar-brand {
max-width: 65%;
}<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/02/Stack_Overflow_logo.svg" class="img-fluid" style="max-height: 4rem" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#toggleMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="toggleMenu">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-right" href="#">item 1</a>
</li>
<li class="nav-item">
<a class="nav-link text-right" href="#">item 2</a>
</li>
<li class="nav-item">
<a class="nav-link text-right" href="#">item 3</a>
</li>
<li class="nav-item">
<a class="nav-link text-right" href="#">item 4</a>
</li>
</ul>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>Related Topics
Jsf <F:Facet> Contents Not Rendered
What Exactly Does This CSS Selector with a Comma Match
How to Create a: :Before for Multiple #Id
Extend Only First Level on Sass
Facebook/Twitter Style Photos Grid Style Layout
iPhone Xr/Xs/Xs Max CSS Media Queries
One CSS File or Individual CSS Files for Each Page
How to Create Text Border in React Native
How to Target The Last Column in a CSS Grid
Rotating Animation Doesn't Work with Chrome
How to Scroll a Div Content Between Another 2 Flex Divs
Why Does My Web Component CSS Not Show? I Am Not Using Shadowdom
Stopping Content from Getting Pushed Down Due to Overlap in Bootstrap