Sidenav materializecss window dim
<p>I'm using materializecss and I had to put z-index into the navbar class because navbar was hiding under my fullscreen slider. Now everything is okay, but when I want to click on my side bar I have this problem:
<a href="http://i.stack.imgur.com/vUDs4.jpg" rel="nofollow">problem</a></p>

<p>The whole window darken and I can’t click anywhere. I think I did something wrong with that z-index
here's css code:</p>

<pre><code>    .slider {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}
#nav{
    z-index: 10;
    position: relative;
}
.sideNav {
    z-index: 11;
}
</code></pre>

<p>html:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;script type="text/javascript" src="bootstrap/js/jquery-2.2.0.js"&gt;&lt;/script&gt;
    &lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"&gt;&lt;/script&gt;
    &lt;script src="script.js"&gt;&lt;/script&gt;


    &lt;link rel="stylesheet" href="style.css"&gt;

&lt;/head&gt;

   &lt;nav id="nav" class=" blue lighten-4"&gt;
        &lt;div class="nav-wrapper"&gt;
            &lt;a href="index.html" class="brand-logo center"&gt;&lt;img src="/img/logo_reh.png"&gt;&lt;/a&gt;
            &lt;a href="#" data-activates="mobile-demo" class="button-collapse"&gt;&lt;i class="material-icons"&gt;menu&lt;/i&gt;&lt;/a&gt;
            &lt;ul class="left hide-on-med-and-down"&gt;
                &lt;li class="active"&gt;&lt;a href="index.html"&gt;Główna&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="kontakt.html"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="side-nav" id="mobile-demo"&gt;
                &lt;li class="active"&gt;&lt;a href="index.html"&gt;Główna&lt;/a&gt;&lt;/li&gt;
                &lt;li class="active"&gt;&lt;a href="kontakt.html"&gt;Kontakt&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/nav&gt;





&lt;div id="szczupix" class="container"&gt;
    &lt;div class="row"&gt;

        &lt;div class="slider fullscreen"&gt;
            &lt;ul class="slides"&gt;
                &lt;li&gt;
                    &lt;img src="http://lorempixel.com/1200/1000/food/" alt="blad"&gt;
                    &lt;div class="caption center-align"&gt;
                        &lt;h3&gt; Lekarze specjaliści&lt;/h3&gt;
                        &lt;h5&gt; Możliwość wykonania specjalistycznych badać lekarskich&lt;/h5&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;img src="http://lorempixel.com/1200/1000/food/" alt="blad"&gt;
                    &lt;div class="caption center-align"&gt;
                        &lt;h3&gt; Tylko świeże warzywa i owoce&lt;/h3&gt;
                        &lt;h5&gt; Pochodzące z naszych polskich upraw&lt;/h5&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;img src="http://lorempixel.com/1200/1000/food/" alt="blad"&gt;
                    &lt;div class="caption right-align"&gt;
                        &lt;h3&gt; Nowoczesny lokal&lt;/h3&gt;
                        &lt;h5&gt; Przestronność i nowoczesność to nasz slogan&lt;/h5&gt;
                    &lt;/div&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


    &lt;script&gt;
        //sivenav
        $(".button-collapse").sideNav();
        //slider
        $('.slider').slider({
            height: 600


        });
        $('.parallax').parallax();
        $('.scrollspy').scrollSpy();

        $('.collapsible').collapsible({
            accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
        });
    &lt;/script&gt;

&lt;/html&gt;
</code></pre>