How Move 'Nav' Element Under 'Navbar-Brand' in My Navbar

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.

Sample Image

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 with s (start)
  • r (right) has been replaced with e (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-navs, 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

Sample Image

Sample Image

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 the navbar-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



Leave a reply



Submit