I am working with a bootstrap navbar and need to customize it by adding a SignOut button and a Welcome message to the menu bar. I also want to adjust the positioning of the logo and company/city name within the navbar. Here is the current setup of my navbar:
https://i.sstatic.net/gzVrU.png
I would like to place the SignOut button where the purple arrow is located, followed by the "Welcome userName" text. Additionally, I want to move the logo and company/city name to the far left of the navbar. How can I achieve this customization? Below is the code snippet I am currently using:
<nav class="navbar navbar-expand-lg py-5 navbar-dark shadow-sm " style="background-color: #264653;width:100%;" >
<div class="container">
<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">test City</span><br />test company</span>
</span>
<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">
<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>
</div>
<div>
<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>
</nav>