Resize of the front when using SideNav - Materialize
<p>I'm making a website with Symfony and Materialize, and my client wants to have the menu on the side. I used the documentation <a href="http://materializecss.com/side-nav.html" rel="nofollow">http://materializecss.com/side-nav.html</a> to make it, and managed to make the side menu on the left. But I have now two problems: </p>

<ul>
<li>first, not important, when I press alt on Firefox, it makes the windows resize a little by making the top menu appears, and the side menu goes from left to right. It's kinda annoying, but not that important.</li>
<li>second, the content under the side menu is hidden, and doesn't resize to make everything appears. I tried to make a div and put in the css a margin-left, but it didn't work. </li>
</ul>

<p>Here is my code html:</p>

<pre><code>&lt;nav&gt;
&lt;ul id="slide-out" class="side-nav fixed"&gt;
  &lt;li&gt;&lt;a href="#!"&gt;First Sidebar Link&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#!"&gt;Second Sidebar Link&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;a href="#" data-activates="slide-out" class="button-collapse"&gt;&lt;i class="mdi-navigation-menu"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</code></pre>

<p>And here is the js:</p>

<pre><code>$('.button-collapse').sideNav({
  menuWidth: 300, // Default is 240
  edge: 'right', // Choose the horizontal origin
  closeOnClick: true // Closes side-nav on &lt;a&gt; clicks, useful for Angular/Meteor
});

 $('.collapsible').collapsible();
</code></pre>

<p>It's only the code in the documentation, and I just have these problems. If anyone has a solution, Thanks a lot ! </p>