Responsive navbar without nav tag Bootstrap3 - html

Question

I know it's strange, but I've take the code with a menu bar whitout nav tag ..
What I would like : Have a hamburger icon (it's ok). When the user click on it, the menu slide down slowly (I'm using slideToggle function with jQuery).
For that, the menu has to be hidden, but if I hide it in small screen (phones) it's also hidden on large screen !
What I have : This code :
<div class="col-xs-1 hidden-sm hidden-md hidden-lg">
<span id="hamburger"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></span>
</div>
<div class="col-xs-12 col-sm-8 menu-nav hidden-xs">
<div class="row text-center">
<a href="{{ path('jt_concours_index') }}">
<div class="col-md-2 col-sm-2 botborder concours"><span class="menu_valign">le concours</span>
</div>
</a>
<a href="#">
<div class="col-md-2 col-sm-2 botborder nos-produits"><span class="menu_valign">nos produits</span>
</div>
</a>
</div>
</div>
JS :
$('#hamburger').on('click', function(){
if ($('.menu-nav').hasClass('hidden-xs')){
$('.menu-nav').removeClass('hidden-xs');
} else {
$('.menu-nav').addClass('hidden-xs');
}
$('.menu-nav').slideToggle('slow');
});
But it's not working .. Have an idea ?
EDIT
I finally used collapse class from bootstrap, like this :
<button class="toggle" data-toggle="collapse" data-target=".menu-nav">
<span id="hamburger"><i class="fa fa-bars fa-2x" aria-hidden="true"></i></span>
</button>
<div class="col-xs-12 col-sm-8 menu-nav collapse">
<div class="row text-center">
<a href="{{ path('jt_concours_index') }}">
<div class="col-md-2 col-sm-2 botborder concours"><span class="menu_valign">le concours</span>
</div>
</a>
<a href="#">
<div class="col-md-2 col-sm-2 botborder nos-produits"><span class="menu_valign">nos produits</span>
</div>
</a>
And now it's working fine. Thanks :)

Answer 1

did you try to change it from display: none to eg display: block instead of working with the hidden-nn classes? you could also create your own hidden class for it.