I want to center the menu items on my navbar. Right now my navbar looks like this:
I want to center the "Users", "Admin", and "records" of the navbar. I also want to move the logo a little bit center-aligned rather than at the bottom edge of the nav bar.
Below is my navbar code:
<nav class="navbar navbar-expand-lg py-5 navbar-dark shadow-sm " style="background-color: #264653;width:100%;" >
<div class="container">
<div class="nameLogo">
<span class="navbar-brand" style="display:flex;">
<img src="~/Images/InfoOrange.png" alt="ACR" width="70" height="70" class="d-inline-block align-middle mr-2" runat="server" />
<span style="font-size:25px;color:white;"><span style="color:#e9c46a">City of Test</span><br />COMPANY OF TEST</span>
</span>
</div>
<button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
<div id="navbarSupportedContent" class="collapse navbar-collapse">
<div>
<ul class="navbar-nav ml-auto">
<%-- <li class="nav-item active"><a href="#" class="nav-link">Home <span class="sr-only">(current)</span></a></li>--%>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Users
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Details</a>
<a class="dropdown-item" href="Depatment.aspx">Department</a>
<%-- <a class="dropdown-item" href="#">Sections</a>--%>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="admindropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Admin
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="NewBoxFolder.aspx">Box/Folder</a>
<a class="dropdown-item" href="#">Configuration</a>
</div>
</li>
<li> </li>
<li class="nav-item dropdown nav-item active">
<a class="nav-link dropdown-toggle" href="#" id="recordsDropDown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Records
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="FileUpload.aspx">BlockChain Upload</a>
<a class="dropdown-item" href="#">Verify</a>
<a class="dropdown-item" href="DocReport.aspx">Report</a>
<a class="dropdown-item" href="BucketList.aspx">S3 List</a>
</div>
</li>
</ul>
</div>
</div>
<div class="sign">
<ul>
<li class="nav-item" style="margin-right:5px" >
<a class="nav-link px-5" href="<%= ResolveUrl("~/Pages/SignOut.aspx") %>">Sign Out</a>
</li>
</ul>
</div>
<div class="welcome">
<ul>
<li class="nav-item" style="margin-right:5px" >
Welcome <%=userName %>
</li>
</ul>
</div>
</div>
</nav>I tried using Bootstrap Justify-center, but that didn't work.
Any help will be greatly appreciated.
CodePudding user response：
When constructing a grid, think of it like building blocks, but defined as "wrappers". So a good way to start is to look at what kind of blocks will make up the menu.
In your case, I would say that there are 4 main wrapper parts,
The navbar itself.
The Logo.
The menu items (User, Admin, Records).
The action(s), i.e. Sign Out.
With all of this in mind, we can start constructing our grid. Flex-box has various, handy properties, such as: justify-content and align-items.
Example with my proposed structure in mind:
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex;
flex: 0 0 100%;
flex-wrap: wrap;
max-width: 100%;
margin-top: calc(var(--bs-gutter-y) * -1);
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5);
}
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
.col-1 {
flex: 0 0 auto;
width: 8.33333333%;
}
.col-4 {
flex: 0 0 auto;
width: 33.33333333%;
}
.col-8 {
flex: 0 0 auto;
width: 66.66666667%;
}
.no-gutters {
--bs-gutter-y: 0;
--bs-gutter-x: 0;
}
.navbar {
padding-left: 15px;
padding-right: 15px;
background-color: #324c3b;
color: #fff;
}
.nav-container {
max-height: 100%;
justify-content: space-between;
align-items: center;
}
.nav-logo {
display: flex;
align-items: center;
justify-content: center;
max-height: 100%;
overflow: hidden;
}
.nav-logo > img {
display: flex;
height: auto;
max-height: 100%;
width: 100%;
object-fit: contain;
}
.text-center {
text-align: center;
}<nav class="navbar row">
<div class="nav-container row">
<div class="nav-logo col-1">
<img src="https://picsum.photos/150/100" alt="Logo" />
</div>
<div class="menu-container col-8">
<div class="row no-gutters">
<div class="menu-item col-4 text-center">
User
</div>
<div class="menu-item col-4 text-center">
Admin
</div>
<div class="menu-item col-4 text-center">
Records
</div>
</div>
</div>
<div class="actions-container col-1 text-center">
<a href="#">Sign Out</a>
</div>
</div>
</nav>Codepen: here.
CodePudding user response：
- Add the class
justify-content-centerto the div with idnavbarSupportedContent, your items will become centered. - About the logo, I copied your code, and the logo-text seems to be on the same center line as the other items.