マテリアライズボタン崩壊ブレークポイント

Question

ナビゲーションバーにボタンが多すぎるため、ボタンが崩壊するブレークポイントに達する少し前にボタンがブランドロゴと重なって見苦しくなります。 $('.button-collapse').sideNav();のブレークポイントを、600pxの代わりに1300px f.eのボタンに置​​き換えるように設定するにはどうすればよいですか？

編集：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