Put <li> at the bottom of the Menu

Question

I have a menu where I have two <li> tags, "Login" and "Register":

And I want to put them at the bottom.

Where is the code for the menu.

<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
    <li class="sidebar-brand"><a href="#top" onclick=$("#menu-close").click();>A Dog O</a></li>
    <li><a href="#top" onclick=$("#menu-close").click();>Home</a></li>
    <li><a href="#sobre" onclick=$("#menu-close").click();>Sobre</a></li>
    <li class="dropdown" runat="server">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" runat="server">Serviços<span id="Span1" class="caret" runat="server"></span>
      </a>
      <ul class="dropdown-menu" data-dropdown-in="fadeInUp" data-dropdown-out="fadeOutDown">
        <li><a href="#">Saúde</a></li>
        <li><a href="#">Escola</a></li>
        <li><a href="#">Qql coisa</a></li>
        <li><a href="#">Coisa qql</a></li>
      </ul>
    </li>
    <li><a href="#portfolio" onclick=$("#menu-close").click();>Portfolio</a></li>
    <li><a href="#contact" onclick=$("#menu-close").click();>Contactos</a></li>
    <li><a href="login.aspx" onclick=$("#menu-close").click();>LogIn</a></li>
    <li><a href="signup.aspx" onclick=$("#menu-close").click();>Registar</a></li>
  </ul>
</nav>

Answer 1

I think this is more simple!

<li style="position: absolute;margin-top: <margin that u want>;width: 100%;"> <a href="login.aspx" onclick = $("#menu-close").click();>LogIn</a> <a href="signup.aspx" onclick = $("#menu-close").click(); $('#signupbox').show()>Registar</a> </li>

Regards!

Answer 2

You can make that column flex with flex-direction: column, then wrap the buttons you want at the bottom in an element with margin-top: auto to move it to the bottom.

* {
  margin: 0; padding: 0; box-sizing: border-box;
}
.sidebar-nav {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.loginSignup {
  margin-top: auto;
}

<a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
  <ul class="sidebar-nav">
    <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
    <li class="sidebar-brand">
      <a href="#top" onclick=$ ( "#menu-close").click();>A Dog O</a>
    </li>
    <li>
      <a href="#top" onclick=$ ( "#menu-close").click();>Home</a>

    </li>
    <li>
      <a href="#sobre" onclick=$ ( "#menu-close").click();>Sobre</a>
    </li>
    <li class="dropdown" runat="server"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" runat="server">Serviços<span
                        id="Span1" class="caret" runat="server"></span></a>
      <ul class="dropdown-menu" data-dropdown-in="fadeInUp" data-dropdown-out="fadeOutDown">
        <li><a href="#">Saúde</a></li>
        <li><a href="#">Escola</a></li>
        <li><a href="#">Qql coisa</a></li>
        <li><a href="#">Coisa qql</a></li>
      </ul>
    </li>
    <li>
      <a href="#portfolio" onclick=$ ( "#menu-close").click();>Portfolio</a>

    </li>
    <li>
      <a href="#contact" onclick=$ ( "#menu-close").click();>Contactos</a>
    </li>

    <li class="loginSignup">
      <a href="login.aspx" onclick=$ ( "#menu-close").click();>LogIn</a>
      <a href="signup.aspx" onclick=$ ( "#menu-close").click();>Registar</a>

    </li>
  </ul>
</nav>