Fixing navbar element wrapping in materializecss navbar - html

Question

My navbar looks like this:
<div class="navbar-fixed" id="navigation">
<ul id="alert_type_nav_drop_down" class="dropdown-content">
</ul>
<nav>
<div class='nav-wrapper'>
<ul id='nav-mobile' class='left'>
<li><a href='/'><img src='http://vignette2.wikia.nocookie.net/gtawiki/images/9/9a/PlayStation_1_Logo.png/revision/latest?cb=20100130082645' height='25px'></a></li>
<li><a href='/'>Test</a></li>
<li><a href='/'>Another Test</a></li>
<li><a href='/'>Heyyy</a></li>
<li><a href='/'>Whyyy</a></li>
<li><a href='/'>Okkkkkk</a></li>
<li><a href='/'>Los Angeles</a></li>
</ul>
<a class="right black-text valign-wrapper"><img class="circle responsive-img" width=50px
src="http://www.stockvault.net/blog/wp-content/uploads/2013/11/Portrait-8.jpg"></a>
</div>
</nav>
</div>
fiddle: https://fiddle.jshell.net/g3mvhvdk/
The problem is that when the window size is too small, elements wrap around into the body of the page like so:
When it normally looks like this:
What's a good way to fix this problem? Should I make the elements horizontally scrollable?
As per suggestions in the comment, I've added the following:
<div class="navbar-fixed hide-on-med-and-down" id="navigation">
which will hide my nav bar when it resizes to be something small enough, my question is, how do I show the hamburger if the navbar's hidden? Is there a helper "show-on-med-and-down" class? I suppose the bigger question is, is there an elegant way to switch from showing a navbar to showing a hamburger and a sidebar?

Answer 1

.nav-wrapper {
display: flex;
align-items: center;
}
#nav-mobile {
flex: 100;
}