How can I make my menu responsive correctly, on the cell phone it looks like this
when I display the menu I select the option but it does not disappear the menu goes to the selected section but the menu window remains 
and on the computer it looks like this:
I add the code used:
$( "#menu_items" ).hide();
$( ".hamburger" ).click(function() {
$( "#login_form" ).hide();
$( "#menu_items" ).slideToggle( "slow", function() {
});
});
$( ".close" ).click(function() {
$( "#menu_items" ).slideToggle( "slow", function() {
});
});
$( "#login_form" ).hide();
$( "#onclick_session" ).click(function() {
$( "#menu_items" ).hide();
$( "#login_form" ).slideToggle( "slow", function() {
});
});
$( ".close" ).click(function() {
$( "#login_form" ).slideToggle( "slow", function() {
});
});
$(document).ready(function(){
$(".flexNticker").jTextEffect({animationTime : '1000',
interval : '2000',
textSource : '.flexNticker ul.data>li'
});
}).navbar-nav {
margin: 0px !important;
}
.container{
position: relative;
}
.menu{
display: block;
float:right;
right: 20px;
top: 50px;
position: absolute;
padding: 20px 30px;
border-radius: 5px;
font-size: 19px;
background-color: #211915;
}
#login_form {
display: block;
float:right;
right: 20px;
top: 50px;
position: absolute;
padding: 15px;
border-radius: 5px;
font-size: 19px;
}
.login_form_header {
color: #ffffff;
padding: 0px 0px 5px 0px;
margin: 0px;
}
.menu ul{
padding-left: 0px;
}
.menu li{
list-style: none;
border-bottom: thin solid #FFFFFF;
padding: 10px 20px 10px 0;
letter-spacing: 1px;
}
.menu a{
color: #FFFFFF;
}
.btn-menu{
display: inline-block;
padding: 5px 12px;
color: #FFFFFF;
line-height: 0px;
font-size: 22px;
margin: 0px;
}
.navbar{
background-color:#33c895;
padding: 0px;
min-height: 55px;
}
.navbar-default .navbar-nav > li > a {
color: #FFF;
}<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div style="" class="navbar-header page-scroll">
<a class="navbar-brand page-scroll" href="#page-top"><img style="margin-top: 0px" src="BeCloseWeb/faces/javax.faces.resource/twitter.png" ></a>
<ul class="nav navbar-nav pull-right">
<li>
<p class="navbar-btn hamburger">
<a href="#" class="btn-menu"><span class="glyphicon glyphicon-menu-hamburger"></span></a>
</p>
</li>
</ul>
<a type="button" id="onclick_session" class="bnt_option_header btn btn-default btn-primary btn-large-dim navbar-right" style="margin-top: 10px; margin-right: 10px;color:whitesmoke; font-weight: bolder; font-size: large"><strong>Iniciar sesión</strong></a>
<a type="button" id="onclick_session" class="bnt_option_header btn btn-default btn-primary btn-large-dim navbar-right" style="margin-top: 10px; margin-right: 10px; color:whitesmoke; font-weight: bolder; font-size: large"><strong> Regístrate</strong> </a>
<a href="<c:url value='/${country}/admin' />" style="margin-top: 10px; margin-right: 10px;color:whitesmoke; font-weight: bolder; font-size: large"
class="bnt_option_header btn btn-default btn-primary btn-large-dim navbar-right "><strong>¿Eres administrador?</strong></a>
<button type="button" class="bnt_option_header_m btn btn-default btn-primary btn-large-dim navbar-right" style="margin-top: 10px; margin-right: 10px" data-toggle="modal"
data-target="#modal_login_register"> -- </button>
<a href="<c:url value='/${country}/admin' />" style="margin-top: 10px; margin-right: 10px"
class="bnt_option_header_m btn btn-default btn-primary btn-large-dim navbar-right">--</a>
</div>
<div id="login_form">
<div class="form-be form-login" role="form" name="form_login" ng-submit="ctrl_core.devices_login('device_login')">
<form role="form" class="text-center">
<h6 align="center" style="font-weight: bolder"><font color="whitesmoke"><i><strong>Iniciar Sesión</strong></i></font></h6>
<div class="form-group">
<input ng-model="ctrl_core.device.user_email" type="email" class="form-control input_icon input_email" name="email" placeholder="Correo electrónico">
</div>
<div class="form-group">
<input ng-model="ctrl_core.device.user_password" type="password" class="form-control input_icon input_email" name="password" placeholder="Contraseña">
</div>
<p style="text-align: right"><a style="color:#FFF; font-size:12px;" href="#"> Olvide mi contraseña</a></p>
<div class="responseValidate" id="response_login"></div>
<button data-loading-text="<i class='fa fa-spinner fa-spin '></i> Enviando"
id="button_loading" type="submit" class="btn btn-success btn-lg" style=" margin-top: 10px;"> Ingresar</button>
</form>
</div>
</div>
<div class="menu" id="menu_items" >
<ul>
<li><a class="page-scroll" href="#noWalls">¿Qué es ?</a></li>
<li><a class="page-scroll" href="#about">Regístrate</a></li>
<li><a class="page-scroll" href="#marketplace">Comunidad </a></li>
<li><a class="page-scroll" href="#sharing">Economía </a></li>
<li><a class="page-scroll" href="#cashback">Market</a></li>
<li><a class="page-scroll" href="#neighborhood">Comercio o</a></li>
<li><a class="page-scroll" href="#admin">Administrador</a></li>
<li><a class="page-scroll" href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>someone to guide me to know what is wrong and be able to correct. thanks