align navbar menus to bottom center - css

Question

I have 2 menus on the web page one needs to show at the center bottom and another one on the top right. This following code shows all of them in the same line.
Here is the layout I am trying to achieve.
**********************************************************************************
Home About User Login
Logo Heading
Link1 Link2 Link3 Link4 Link5
**********************************************************************************
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"/>
<style>
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
vertical-align: bottom;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
</a>
<ul class="navbar-nav mr-auto">
<li class="nav-item active" ID="link1" runat="server" >
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server" >
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server" >
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server" >
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server" >
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Answer 1

You're super close! An mx-auto and mt-auto on the bottom-center menu and an mb-auto on the top-right menu are all you need to get it working.
NOTE: This does break on smaller screens as we're still treating everything as columns and columns do wrap. But, you could absolutely position the top-right menu if you need to on smaller screens.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<style>
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav>li>a {
padding: 0;
margin: 0;
vertical-align: bottom;
}
</style>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png">Heading
</a>
<ul class="navbar-nav mx-auto mt-auto">
<li class="nav-item active" ID="link1" runat="server">
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server">
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server">
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server">
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server">
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="navbar-nav ml-auto mb-auto">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<asp:Label ID="LogOnUser" runat="server"></asp:Label>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>

Answer 2

Try this code. hope will help you.
.navbar-nav {
flex-direction: row;
}
.nav-link {
padding-right: .5rem !important;
padding-left: .5rem !important;
}
/* Fixes dropdown menus placed on the right side */
.ml-auto .dropdown-menu {
left: auto !important;
right: 0px;
}
.navbar-nav > li > a
{
padding: 0;
margin: 0;
vertical-align: bottom;
}
.bottom_menu{
margin-top: 30px;
}
.top_menu{
margin-bottom: 30px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded justify-content-md-center">
<a class="navbar-brand" href="">
<img style="width: 64px;height: 64px;" src="../../Images/new.png" >Heading
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-between align-items-center w-100" id="navbarNavDropdown">
<ul class="bottom_menu navbar-nav ml-auto text-md-center">
<li class="nav-item active" ID="link1" runat="server" >
<a class="nav-link">Link1</a>
</li>
<li class="nav-item active" ID="link2" runat="server" >
<a class="nav-link">Link2</a>
</li>
<li class="nav-item active" ID="link3" runat="server" >
<a class="nav-link">Link3</a>
</li>
<li class="nav-item active" ID="link4" runat="server" >
<a class="nav-link">Link4</a>
</li>
<li class="nav-item active" ID="link5" runat="server" >
<a class="nav-link">Link5</a>
</li>
</ul>
<ul class="top_menu navbar-nav ml-auto justify-content-md-center justify-content-start flex-nowrap">
<li class="nav-item">
<a class="nav-link" href="../../page.aspx">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../About.aspx" >About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../User.aspx">User</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><asp:Label ID="LogOnUser" runat="server"></asp:Label></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Log Out</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer 3

You mean Like This?
<style>
#header{
position: relative;
width: 100%;
height: 100px;
background-color: orange;
}
a{
display: inline-block;
width: 50px;
}
#logo, #navigation, #url{
position: absolute;
}
#logo{
top: calc(50%);
}
#navigation{
top: 0;
right: 0;
}
#url{
left: calc(50% - 125px);
bottom: 0;
}
</style>
<div id = "header">
<div id = "logo">
LOGO
</div>
<div id = "navigation">
<a>Home</a>
<a>About</a>
<a>User</a>
</div>
<div id = "url">
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
<a>Link4</a>
<a>Link5</a>
</div>
</div>