How move 'nav' element under 'navbar-brand' in my Navbar
To right align the login, you'd use ml-auto
to auto fill the left side, which will push the links to the right.
Option 1:
Then adjust the min-height
of the navbar. Use align-items-end
to push the links to the bottom, and align the brand on top as desired. This will give the appearance of 2 Navbar rows.
@media (min-width: 567px) {
.navbar-brand
{
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
}
.navbar {
min-height: 90px;
}
}
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a href="#" class="navbar-brand">Academind</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse align-self-end" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Users</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Products</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item ">
<a href="#" class="nav-link">Login</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Log out</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/07ibCvkQJi
Option 2: (remove extra CSS)
Simply apply flex-column
to the navbar
, and wrap the brand and toggler together in one flexbox div. Use the auto margin utils to center the brand.
<nav class="navbar navbar-expand-sm navbar-dark bg-dark flex-column align-items-stretch">
<div class="d-flex">
<a href="#" class="navbar-brand mx-sm-auto mr-auto">Academind</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse w-100" id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" class="nav-link">Users</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Products</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link">Login</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Logout</a>
</li>
</ul>
</div>
</nav>
https://www.codeply.com/go/qVJPhAy6fS
Related:
How can I have Brand and Navbar on separate lines?
Bootstrap Move elements inside navigation bar
I used position: absolute;
for your class called btn and made it 5px from the top and the right. You can adjust as you would like, but the top and right styling only works if you tell the html that the position is absolute.
.btn {
right: 5px;
top: 5px;
position: absolute;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded-bottom">
<a class="navbar-brand text-white font-weight-bold nav-link">Car Shop</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a href="/cars.html" class="nav-link text-light">Cars</a>
<a href="/tools.html" class="nav-link text-light">Tools</a>
<button type="submit" class="btn">Pay</button>
</div>
</div>
</nav>
How to align nav items to the right in Bootstrap 5?
The code from my example Codeply is using Bootstrap 4, but your code is using Bootstrap 5 beta. If you take a look at the new Bootstrap 5 spacing utility classes you'll see that...
l
(left) has been replaced withs
(start)r
(right) has been replaced withe
(end)
Why margin left (ml-*) is not working in Bootstrap 5?
ml-auto
no longer exists, and the Bootstrap 5 equivalent would be ms-auto
:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="d-flex flex-grow-1">
<span class="w-100 d-lg-none d-block">
<!-- hidden spacer to center brand on mobile --></span>
<a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
<a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
<img src="//placehold.it/40?text=LOGO" alt="logo">
</a>
<div class="w-100 text-right">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
<ul class="navbar-nav ms-auto flex-nowrap">
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">How We Help</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Blog</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link m-2 menu-item">Contact</a>
</li>
</ul>
</div>
</nav>
Demo: https://codeply.com/p/zzFC5XoyUm
Why margin right (mr-*) is not working in Bootstrap 5?
Additionally, mr-auto
has been replaced with me-auto
.
Here you can read why Bootstrap 5 uses the start
and end
approach to improve RTL support since left
and right
are absolute, while start
and end
are relative.
The flexbox utils such as justify-content-end
can also be used as explained here
Bootstrap navbar-brand causing navbar-nav items to shift right from centered position in nav bar?
There are a few different ways to do this, and I guess it depends on what you are going to do further down the track, but the easiest thing is probably to take the .navbar-brand out of the document flow, so that the .navbar-nav ignores it when centering.
You can do this quite easily by adding something like this:
.navbar-brand {
position: absolute;
}
You can check it out over here: http://codepen.io/anon/pen/PNMBQx
Hope that helps, and good luck!
How can I align my navbar items to the left and right side of the centered image?
I made your .navbar-nav a
font-color black just so I could see it better, and added white-space: nowrap;
on your navbar-nav
class so your words don't break when resizing. I am not sure if I properly understood what you wanted your end result to be, but I think I got the gist of it.
For this to work with the ease of customization in the future, I suggest splitting each side into two separate divs, as I did below. .left
containing the left side nav components, and .right
containing the right components. I put a flex-display
on your two new divs dividing the components, and spaced them out using gap
. Then I nested them in a parent nav element
which I called same-line
for demonstration purposes.
First, add a flex-display
then you can add justify-content: space-around;
on your parent nav
that allows for the two sides to space evenly to both the left and right sides respectfully. If your logo is truly the size of the .circle
class, I added a sample media-query
so the font-size
of the nav components gets smaller and doesn't overlap the logo.
.navbar {
position: relative;
padding-top: 0;
opacity: 80%;
}
.navbar-brand {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: block;
}
.img-responsive {
height: auto;
width: auto;
max-height: 156px;
max-width: 250px;
top: 109px;
}
.circle {
width: 249px;
height: 285px;
border-radius:250px;
font-size:50px;
line-height:500px;
text-align:center;
background: black;
}
.navbar-nav a {
color: black;
white-space: nowrap;
}
/* additions */
.left {
display: flex;
gap: 20px;
}
.right {
display: flex;
gap: 20px;
}
nav.same-line {
display: flex;
justify-content: space-between;
}
@media only screen and (max-width: 800px) {
.same-line {
font-size: smaller;
}
.left, .right {
display: flex;
gap: 5px;
}
}
/* additions END */
body {
background: url(assets/hack2.jpg) no-repeat center center fixed;
background-size: cover;
}
<div class="bodyContainer">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<div class="circle bg-light navbar-brand">
<a href="#" class="navbar-brand">
<img class="img-responsive navbar-brand" src="assets/logo.png" alt="logo">
</a>
</div>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<nav class="same-line"> <!-- puts both .left & .right one same line -->
<div class="navbar-nav left">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Über uns</a>
<a href="#" class="nav-item nav-link">Aktuelles</a>
</div>
<!-- left contains leftside nav components, right = opposite -->
<div class="navbar-nav right">
<a href="#" class="nav-item nav-link">Genossenschaft</a>
<a href="#" class="nav-item nav-link">Nochagfrogt</a>
<a href="#" class="nav-item nav-link">Kontakt</a>
</div>
</nav>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
</div>
Bootstrap align navbar items to the right
Bootstrap 5 (update 2021)
In Bootstrap 5 (see this question), ml-auto
has been replaced with ms-auto
to represent start
instead of left
. Since the Navbar is still based on flexbox, auto margins OR flexbox utility classes are still used to align Navbar content.
For example, use me-auto
...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu </a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Bootstrap 5 right align Navbar content
Bootstrap 4 (original answer)
Bootstrap has many different ways to align navbar items. float-right
won't work because the navbar is now flexbox
.
You can use mr-auto
for auto right margin on the 1st (left) navbar-nav
.
Alternatively, ml-auto
could be used on the 2nd (right) navbar-nav
, or if you just have a single navbar-nav
.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Register</a>
</li>
</ul>
</div>
</nav>
https://codeply.com/go/P0G393rzfm
There are also flexbox utils. For example use justify-content-end
on the collapse menu:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</div>
</nav>
Or when you have 2 navbar-nav
s, use justify-content-between
in navbar-collapse
would work to even the space between the navbar-navs:
<div class="navbar-collapse collapse justify-content-between">
<ul class="navbar-nav mr-auto">
..
</ul>
<ul class="navbar-nav">
..
</ul>
</div>
Update for Bootstrap 4.0 and newer
As of Bootstrap 4 beta, ml-auto
will still work to push items to the right. Just be aware the the navbar-toggleable-
classes have changed to navbar-expand-*
Updated navbar right for Bootstrap 4
Another frequent Bootstrap 4 Navbar right alignment scenario includes a button on the right that remains outside the mobile collapse nav so that it is always shown at all widths.
Right align button that is always visible
Related: Bootstrap NavBar with left, center or right aligned items
How can I have Brand and Navbar on separate lines?
Use flex-column
to make the navbar items stack in 2 rows (lines).
- group the logo & toggler together in 1 flexbox div (
d-flex w-100
) - use
mx-md-auto
(auto-margins) to center the logo on larger widths - use
text-center
to center items in thenavbar-nav
https://www.codeply.com/go/W9HQcd3Pyw
<nav class="mainNav navbar navbar-expand-md navbar-light flex-column">
<div class="w-100 d-flex">
<a class="navbar-brand mx-md-auto" href="#">
<img src="img/logo.png" alt="Logo" height="80px" width="auto">
</a>
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="navbar-nav text-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
Read more about the Navbar and Utility classes in the Bootstrap 4 docs.
Related questions
How to centre navbar logo in Boostrap 4 with nav-links below
Bootstrap 4: Navbar with logo and 2 rows
Bootstrap 4 navbar with 2 rows and inline form
Unable to move the brand to its own line above navigation in Bootstrap 3 navbar
on line 3820 of you code in your media query for min-width: 768px
you need to add:
.navbar-nav {
clear: left;
}
since you have a responsive site, you may need to make other adjustments as well
once you declare a float
, the elements following it will continue from there. if you float:left
, everything after will continue flowing to the right until your width is filled. to stop this you need to clear the float. if the preceding element is float:left
you need to clear:left
and vice versa. you can simply use clear:both
when you don't know which float is preceding
Related Topics
CSS Box Shadow Around a Custom Shape
Gradient Stroke Along Curve in Canvas
How to Include Special Characters in Query Strings
Why Does Naming Your HTML Form Submit Button "Submit" Break Things
Why Is There a Default Margin on The <Body> Element
Marking Up a Search Result List with HTML5 Semantics
Using Rvest or Httr to Log in to Non-Standard Forms on a Webpage
Fire Onmouseover Event When Element Is Disabled
Create Line Numbers on Pre with CSS Only
CSS/HTML: How to Change The Color of The Check Mark Within The Checkbox Input
Set Div to Have Its Siblings Width
Browser Canvas Cors Support for Cross Domain Loaded Image Manipulation
Draw Double Curved Item with Beveled Edges
@Font-Face Not Working with Specific Version of Internet Explorer 11