How to disable sidenav overlay in Materializecss? - html

Question

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.

Answer 1

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... :(

Answer 2

add this to your css file :
#sidenav-overlay {
background-color: transparent;
}

Answer 3

I know it is an old question but for anyone wanting to remove the overlay the following works:-
.sidenav-overlay {
height: 0px;
width: 0px;
}
or with Svelte:-
:global(.sidenav-overlay) {
height: 0px;
width: 0px;
}

Answer 4

One approach would be to add .sidenav-overlay{opacity: 0;} to your css.

Answer 5

Well, I have also not found any specific function call to do so.
This is how disabling the sidenav without removing it from DOM.
var sideNavElem = $('a[data-activates="slide-out"]');
$(sideNavElem).off('click');
$(sideNavElem).click(function(e){
e.preventDefault();
});
is it similar to what you are looking for?

Answer 6

You can easily remove it from DOM using onOpenStart event
$('.side-nav').sidenav({
..., //your sidenav options here
onOpenStart: function(sidenav) {
sidenav.M_Sidenav._overlay.remove();
}
});