在materializecss导航栏中修复导航栏元素换行

Question

我的导航栏看起来像这样：

<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>

小提琴：https://fiddle.jshell.net/g3mvhvdk/

问题是，当窗口大小太小时，元素会像这样环绕到页面主体中：

通常看起来像这样：

解决此问题的好方法是什么？我应该使元素水平滚动吗？

根据评论中的建议，我添加了以下内容：

<div class="navbar-fixed hide-on-med-and-down" id="navigation">

这会隐藏我的导航栏，当它调整大小足够小时，我的问题是，如果导航栏隐藏了，我如何显示汉堡包？有没有帮手“上下中课”？我想更大的问题是，是否有一种优雅的方式可以从显示导航栏切换到显示汉堡包和侧边栏？

Answer 1

＆＃13;

＆＃13;

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

#nav-mobile {
  flex: 100;
}

＆＃13;

＆＃13;

＆＃13;