Html 在materializecss navbar中固定navbar元素包装

我的导航栏如下所示：

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

小提琴：

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

通常情况下是这样的：

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

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

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

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

当导航条调整到足够小时，它会隐藏我的导航条，我的问题是，如果导航条被隐藏，我如何显示汉堡？中级和低级班有助手秀吗？我想更大的问题是，有没有一种优雅的方式从显示导航栏切换到显示汉堡和侧边栏？

.导航包装器{ 显示器：flex； 对齐项目：居中； } 移动导航{ 弹性：100；

---

你会考虑将菜单项隐藏在较小的屏幕大小上，而不是显示一个“菜单”或“汉堡包图标”来显示点击时的项目？所以当它太小的时候把它变成一个SIDENav？这是一个选项。在较小尺寸的屏幕上，人们熟悉下拉菜单。或者，只需将导航高度设置为一个百分比，而不是使用像素，并根据需要使用媒体查询更改该值。这会用我发现的一个小问题更新该问题，不幸的是，这会修复环绕图像的问题，元素会发生移动，这样它们就不会visible@Stupid.Fat.Cat在展会上，你不需要在这个帖子中询问设计方面的建议。应该开发设计。但是，如果您在完成设计的实施过程中遇到问题，我们愿意提供帮助。显示一张图片，说明您希望它在小分辨率下如何工作。