實現按鈕摺疊斷點

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（可選，剛剛添加填充，以名牌產品稱號，標誌）：

@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