物化按钮折叠断点

Question

我的导航栏包含了太多的按钮，所以在我到达触发按钮折叠的断点之前不久，按钮重叠了我的品牌标志，看起来很难看。我怎么能设置$('.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(可选，只是添加了padding to Title brand 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
});

小提琴来了