Bootstrap 4 toggle menu "dropdown" (only in mobile view) - html

Question

I have a simple navigation bar at the very top of my site with two links only. When the view becomes mobile (tablet and/or mobile), those links disappear and the menu "hamburger" icon shows. However, when I click it, nothing shows. I want both my links to show when I click the menu icon.
/* Registration Navbar */
.registration-navbar {
background-color: #8ABE57;
height: 45px;
}
.registration-navbar ul li a {
color: #ffffff;
font-size: 0.8em;
}
.registration-navbar ul li a:hover {
color: #31353D;
}
.navbar-dark,
.navbar-toggler {
border: none;
color: rgba(255, 255, 255, 0);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<nav class="navbar navbar-expand-lg navbar-dark registration-navbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse my-auto" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Mi Cuenta</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Registrarme</a>
</li>
</ul>
</div>
</nav>

Answer 1

Remove height : 45px from .registration-navbar and that will solve the problem .
/* Registration Navbar */
.registration-navbar {
background-color: #8ABE57;
}
.registration-navbar ul li a {
color: #ffffff;
font-size: 0.8em;
}
.registration-navbar ul li a:hover {
color: #31353D;
}
.navbar-dark,
.navbar-toggler {
border: none;
color: rgba(255, 255, 255, 0);
}