How to make Nav resposive - html

Question

Demo app you is here: App
Nav looks as I want on small screen, only 'Home' link and toggle button on the right.
Toggle button works, but it is showing elements inline, I would like to display elements one belove other
#media screen and (max-width: 600px) {
/*.topnav li:not(:first-child) {display:none;}*/
.topnav li:not(:nth-child(2)) {display:none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav li {
display: inline-block;
}
}
<nav id="main">
<div class="topnav" id="myTopnav">
<ul>
<li class="logo">HOME.</li>
<li>HOME</li>
{{#if user.admin }}
<li class="active"><a class="accordion-toggle btn-block text-warning" href="/admin"><i class="fa fa-cogs" aria-hidden="true"></i> Administration</a></li>
{{/if}}
<li>
<a href="/shopping-cart">
<i class="fa fa-shopping-basket" aria-hidden="true"></i> Shopping Cart
<span class="badge">{{ session.cart.totalQty }}</span>
</a>
</li>
<li>
<i class="fa fa-envelope-o" aria-hidden="true"></i></i> Contact Us
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> User <span class="caret"></span>
<ul class="dropdown-menu">
{{# if login }}
<li>User Account</li>
<li role="separator" class="divider"></li>
<li>Logout</li>
{{ else }}
<li>Sing in</li>
<li role="separator" class="divider"></li>
<li>Sing up</li>
{{/if}}
</ul>
</li>
☰
</ul>
</div>
</nav>
<script type="text/javascript" src="javascripts/navbar.js"></script>

Answer 1

Add display:block to nav ul when below 600px:
#media screen and (max-width: 600px) {
/*.topnav li:not(:first-child) {display:none;}*/
.topnav li:not(:nth-child(2)) {display:none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav li {
display: inline-block;
}
/*Add the following*/
nav ul{
display:block;
}
}