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>

```