4

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.

6 Answers 6

6

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

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;
}
1

add this to your css file :

#sidenav-overlay {
    background-color: transparent;
}
0

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

0
0

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?

1
  • I don't understand your example. But I don't want to disable the sidenav. The only thing I want to do is remove the overlay. Commented Jul 28, 2016 at 19:29
0

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();
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.