Topic: 4.4.3 side nav does not remove sidenav-overlay

Jonathan Yates pro asked 6 years ago


I have updated to latest 4.4.3 as this is supposed to include improvements to the Side Nav. However, When I click on a link in my side nav it progressively adds a sidenav-overlay div to the main content. This causes the main content to have a mask overlay.

<div id="sidenav-overlay"></div>

I am also calling


For each navigation link as this is the only way to make the side bar disappear.

If I then open the side nav and click another link I get another sidenav-overlay div added to the Dom.

<div id="sidenav-overlay"></div>
<div id="sidenav-overlay"></div>

Further side navigation adds sidenav-overlay divs for each navigation click and the page goes progressively darker as there are multiple overlays masking the main content.

I have spent hours trying to resolve this which is a real waste of my time!! This was working in previous versions.

How do I stop this happening and get rid of the sidenav-overlay divs when clicking a link?


Subhash Ekkaluru pro commented 6 years ago

hi, am also facing same issue , could you please solve this version: MDB PRO 4.5.3 Thank you

Canart free commented 4 years ago

The problem persists. There is no solution ? I spent hours trying too.... Thanks for help

Amware free answered 3 years ago

How could we go about fixing this in React because if I have a link in the SideNav and it don't navigate to anything the SideNav closes but the overlay stays. How do I go about fixing this?

UPDATE: I was able to fix this issue with invoking the handleToggleA after my onClick method finished that wasn't navigating to anything. Which by default clicking a navLink and the event listener picks up another event even unrelated to it the side nav will close it but keep the overlay visible. Now here is the following example:

// Where Method is being called
    <MDBSideNavLink disabled topLevel>
        Change OS View
        labelLeft={<MDBIcon brand icon='windows'/>}
        labelRight={<MDBIcon brand icon='linux'/>}
        checked={this.state.title === "Unix"}
        className='pull-right' onClick={() => this.changeOS()} // Won't close overlay solution can be resolved in 2 ways you can put a && and call this.handleToggleA or call it at the end of this.changeOS

Moderators can you please add this to a forum or Examples and Customization page for SideNav in the React view pane. That would be awesome.

Jonathan Yates pro answered 6 years ago

Resolved this eventually with
  closeOnClick: true

Canart free commented 4 years ago

No. the only solution is to set display :none to overlay via CSS, but it's not the wish of my client.

Please help ! Exactly the same proble of Jonathan Yates.

Shoaib Abbas free commented 4 years ago

Solution for multiple creation of div with id="sidenav-overlay"such as: " " on click menu icon action add with $("div#sidenav-overlay").attr("class","sidenav-overlay");

and $(document).on('click',".sidenav-overlay",function (){ $(".sidenav-overlay").remove()});

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No