css - 实现按钮折叠断点

Question

我的导航栏包含太多按钮，所以在我到达触发按钮折叠的断点之前不久，按钮与我的品牌 Logo 重叠，看起来很难看。我如何设置 $('.button-collapse').sideNav(); 的断点，以便它替换 1300px f.e 而不是 600px 处的按钮？

编辑:http://jsfiddle.net/kqjy7jbb/9/

Answer 1

删除代码中的容器 div，它通过压缩所有内容而导致问题。它将解决问题。

HTML: (除了删除容器 div 外没有任何改变)

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
  <div class="nav-wrapper blue-grey darken-4">
    <!-- <div class="container"> ONLY CHANGE-->
    <a href="#" data-activates="mobile-demo" class="button-collapse">
      <i class="material-icons">menu</i>
    </a>

    <a class="brand-logo light immersight-color" href="#"><b>Title</b></a>

    <ul class="right hide-on-med-and-down">
      <li class="active test tooltipped" data-position="bottom" data-delay="100" data-tooltip="Grid Ansicht"><a href="#"><i class="material-icons">apps</i></a></li>
      <li class="test tooltipped" data-position="bottom" data-delay="100" data-tooltip="Panorama Ansicht">
        <a href="#"><i class="material-icons">view_quilt</i></a>
      </li>
      <li class="test tooltipped" data-position="bottom" data-delay="100" data-tooltip="Slide Ansicht">
        <a href="#"><i class="material-icons">view_carousel</i></a>
      </li>
      <li><a class="waves-effect waves-light btn immersight-backgroundcolor">Login</a></li>
      <li><a class="waves-effect waves-light btn immersight-backgroundcolor">Registrieren</a></li>
      <li><a class="waves-effect waves-light btn immersight-backgroundcolor">Download Client</a></li>
    </ul>

    <!-- </div> -->
  </div>
</nav>

CSS (可选，只是向标题品牌 Logo 添加了填充):

@media only screen and (min-width: 993px) {
  .brand-logo {
    margin-left: 15px;
    /* Margin for Title when all buttons are showed i.e. when screen size is large */
  }
}

JQuery (这里也没有任何改变)

$('.button-collapse').sideNav({
  menuWidth: '80%', // Default is 240
  edge: 'left', // Choose the horizontal origin
  closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
});

这是 fiddle