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?
Bootstrap 4 navbar with brand center and links on the left, center and right
This is my idea of how to implement a menu like the one you wanted. Note that border classes are just added for visual testing, they can be deleted. I hope this helps you.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<nav class="navbar navbar-dark navbar-expand-md bg-success">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-nav"> <span class="navbar-toggler-icon"></span> </button>
<div class="navbar-collapse collapse dual-nav order-1 order-md-0"> <ul class="navbar-nav border border-primary"> <li class="nav-item"> <a class="nav-link" href="#">Left Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Left Link</a> </li> </ul> </div>
<div class="navbar-collapse collapse dual-nav order-2 order-md-1 justify-content-end"> <ul class="navbar-nav border border-danger"> <li class="nav-item"> <a class="nav-link" href="#">Center Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Center Link</a> </li> </ul> </div>
<a href="/" class="navbar-brand mx-auto order-0 order-md-2 p-2">Brand</a>
<div class="navbar-collapse collapse dual-nav order-3 order-md-3"> <ul class="navbar-nav border border-danger"> <li class="nav-item"> <a class="nav-link" href="#">Center Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Center Link</a> </li> </ul> </div>
<div class="navbar-collapse collapse dual-nav order-4 order-md-4 justify-content-end"> <ul class="navbar-nav border border-primary"> <li class="nav-item"> <a class="nav-link" href="#">Right Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Right Link</a> </li> </ul> </div>
</nav>Bootstrap 4 center navbar elements without centering on mobile collapse
Basically this has already been answered. Use the utility classes to make the navbar-collapse full width (w-100) and then justify-content-center to center the links...
https://www.codeply.com/go/wWZKVllCei
<nav class="navbar navbar-dark navbar-expand-lg bg-dark sticky-top">
<a href="./index.html" class="navbar-brand">Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="mainNav">
<ul class="navbar-nav w-100 justify-content-center" id="navElements">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Prelicensing</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Schedule & Cost</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Defensive Driving</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Road Test Prep.</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">FAQ</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Reviews</a>
</li>
</ul>
</div>
</nav>
Depending on the width of the brand, you may also want to set widths for the Navbar content (brand, links, etc..) to ensure the links are perfectly centered. Otherwise, the adjacent items can effect the position of the "centered" links.
https://www.codeply.com/go/jk6KogFo8H (perfect center)
Bootstrap 4 collapsed navbar brand not centered
The problem is that the .navbar-brand link is not as wide as the links below, because it shares space with the menu icon on the right. If you just make the menu icon absolutely positioned, it will be removed from the document flow and the brand/links will align properly.
Current
Add these styles to .navbar-toggler
.navbar-toggler {
position: absolute;
top: 8px;
right: 16px;
}
Result
Centering a Navbar: Bootstrap 4
Remove the ml-auto CSS class from the ul tag.
Add this in CSS
.navbar-brand {
position: absolute !important;
}
bootstrap navbar with centered nav-brand
The navbar-toggler button uses the data-target to identify the items to include in the collapsed menu for mobile screens.
If you want two (or more) list of links included in the menu on small screens, switch from using an id (ids have to be unique – you can use the same id again) to using a class and apply the same class to each list.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
body {
font-family: sans-serif;
}
body {
margin-top: 75px;
}
.navbar {
padding: 0;
}
.navbar-nav .navbar-brand {
color: #efefef;
}
.navbar-nav .nav-item {
font-size: 1.3rem;
padding-left: 0.7rem;
padding-right: 0.7rem;
}
.navbar-nav .nav-item a,
.navbar-nav .nav-item button {
color: #efefef;
}
.nav-item:hover {
background: #f7f7f7;
}
.nav-item:hover {
background: #56ace3;
}
</style>
<nav class="navbar navbar-expand-lg fixed-top bg-primary">
<div class="container">
<div class="collapse navbar-collapse order-lg-1 order-3 navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item py-1">
<a href="" class="nav-link ">Home</a>
</li>
<li class="nav-item py-1">
<a href="" class="nav-link">Buy</a>
</li>
<li class="nav-item py-1">
<a href="" class="nav-link">Rent</a>
</li>
<li class="nav-item py-1">
<a href="" class="nav-link">Sell</a>
</li>
</ul>
</div>
<a href="" class="navbar-brand text-white mx-2 order-1">
<h2 class="d-inline align-middle"><strong>centerLogo</strong></h2>
</a>
<button class="order-2 navbar-toggler" type="button" data-toggle="collapse" data-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="text-white fas fa-bars fa-2x"></i>
</button>
<div class="collapse navbar-collapse order-lg-3 order-4 navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item py-1">
<a href="" class="nav-link">Register</a>
</li>
<li class="nav-item py-1">
<a href="" class="nav-link">Login</a>
</li>
</ul>
</div>
</div>
</nav>Bootstrap 4 centered navbar
try this code. it works with bootstrap 4. I just added d-flex justify-content-center to navbar-collapse.
<nav class="navbar navbar-expand-md navbar-light fixed-top"> <a class="navbar-brand" href="/"> <img src="/img/frontpage/logotest.png">logo </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse d-flex justify-content-center" id="navbarsExampleDefault"> <ul class="navbar-nav "> <li class="nav-item "><a class="nav-link" href="/">Home</a></li> </ul> </div></nav>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
Bootstrap css image center and navbar collapse inline with brand
https://jsfiddle.net/xmcfn6r0/8/
If you change width of .darklogo also you need to change left value of it.
@media (max-width: 992px) {
#mainNav .whitelogo {
display: none;
}
#mainNav .navbar-brand {
position: absolute;
left: 50%;
}
#mainNav .darklogo {
width: 50%;
position: relative;
left: -25%;
display: block;
}
}
Related Topics
Sunburst Effect with CSS3 Gradient
Selector for All a Tag Descendants
Cannot Change the Content of Visited :Before Pseudo-Elements
Why an Inline-Block Container Doesn't Collapse When Contains Only Floated Items
Creating Rounded Corners in IE7/IE8
8-Digit Hex Is Not a Background-Color Value
Margin:Auto Not Working Vertically
Difference Between Two Element Styles with Google Chrome
What Are Good Resolution Values to Use with Media Queries
Css3 Transition ( Vendor Prefixes) Crashes Safari Immediately
Cursor:Pointer on Pseudo Element Ie
How to Select a Text (Without Tag) in a Div Using CSS Selector
Inside Transparent Arrow on the Left
Should the Cursor Property Be Set in a Rule with or Without the :Hover Pseudo-Class
How to Route to CSS/Js Files in MVC.Net