Materilize боковой нав всегда открыт, не загружайте разрушился

Question

Моей стороны-нав должно быть нагрузка разрушилась, а также показывает модальную как в этой скрипке:

Соответствующий код: HTML:

<header class="text-center"> 
 
</header> 
 
<div class="main_container"> 
 

 
<nav class="indigo darken-4"> 
 
    <div class="nav-wrapper"> 
 
    <a href="#" class="brand-logo center"><h1>code.partners near you</h1></a> 
 
    <ul id="slide-out" class="side-nav fixed"> 
 
     <li class="bold"><a href="/auth/github" class="waves-effect waves-teal">Login with Github</a></li> 
 
     <li class="bold"><a href="/marker" class="waves-effect waves-teal">Create a New Marker</a></li> 
 
     <li class="bold"><a href="/logout" class="waves-effect waves-teal">Logout</a></li> 
 
    <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="mdi-navigation-menu"></i></a> 
 
    </ul> 
 
    </div> 
 
</nav> 
 

 
<main> 
 
{{!-- <div class="container text-center"> --}} 
 
    <div id="map_container"> 
 
    \t <div id="map"></div> 
 
     <div id="message_box"> 
 
     <ul id="messages"></ul> 
 
     <div id="messageInputBox"> 
 
      <form action=""> 
 
      <input id="m" autocomplete="off" /><button>Send</button> 
 
      </form> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
{{!-- </div> --}} 
 

 
</main>

и мой Javascript:

$(document).ready(function(){ 
 
    console.log("interactive is linked and ready"); 
 

 
// Initialize collapse button 
 

 

 
    $(".button-collapse").sideNav({ 
 
     menuWidth: 240, // Default is 240 
 
     edge: 'left', // Choose the horizontal origin 
 
     closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor 
 
    }); 
 
    // Initialize collapsible (uncomment the line below if you use the dropdown variation) 
 
    //$('.collapsible').collapsible(); 
 

 

 
});//end document.ready

моя страница Heroku: http://coding-partners.herokuapp.com/home

Моя скрипка: https://jsfiddle.net/clwarnock/h7md1q3u/8/

Я пытаюсь получить мою сторону-Nav действовать больше как в скрипкой:

1. Пуск рухнул
2. Показывать модальный при открытии

Редактирование для Дэнни Buonocore

Когда окно просмотра настраивается на небольшой размер устройства, нет меню гамбургер, чтобы открыть его снова. Я думаю, что где-то есть конфликт, который я не вижу.

Answer 1

Боковая панель предназначена для автоматического расширения, когда окно достаточно велико. Это называется responsive web design. Если вы уменьшите свой браузер, вы увидите, что он не будет расширен при загрузке.