I'm developing a website in Blazor with Bootstrap version 5.1. So I set an image within that navbar. Now I want to align the other items of the navbar just before and after the image in the center. I tried using the Bootstrap 5.0 ms-auto and me-auto to a div and put the nav items in it, but it only aligned the items to the right or left corner of the navbar.
Here is the code of the website:
@page "/"
<style>
.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:#000
}
body {
background: url(assets/hack2.jpg) no-repeat center center fixed;
background-size: cover;
}
</style>
<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">
<div class="navbar-nav">
<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>
<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>
<div class="navbar-nav ms-auto">
<a href="#" class="nav-item nav-link">Login</a>
</div>
</div>
</div>
</nav>
</div>
If it helps (because I created a container class for the body):
.bodyContainer {
height: calc(100vh - 60px);
}
CodePudding user response：
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>Click full-page when testing the snippet, and resize your browser to watch the font-size change just before it overlaps. I would target this same media-query to change your logo size when resizing also.