Search code examples
htmlcssmaterialize

How to disable sidenav overlay in Materializecss?


I have the following code:

    <ul id="slide-out" class="side-nav">
        <li><a class="subheader">Scalls Seleccionados</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 1</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 2</a></li>
        <li><a class="btn waves-effect waves-light cyan"><i class="material-icons">inbox</i>Scall 3</a></li>
        <li><div class="divider"></div></li>
    </ul>
    <a data-activates="slide-out" class="button-collapse btn-floating btn-large cyan" style="top: 10px; left: 10px;">
        <i class="material-icons">menu</i>
    </a>

Do you have any idea how to disable/remove the overlay when I display the sidenav in Materializecss?

I've spend a lot of time trying to remove it.


Solution

  • IF the issue is because the overlay is overlapping the nav menu, use this CSS fix;

    .navbar-fixed {
       z-index: 999; 
    }
    // the default value is 997 in materialize.min.css, which places the nav behind the overlay... :(