Topic: Side nav init while hidden

stefangregg priority asked 1 year ago

Hia, I am looking to get my side nav bar to initialize off-screen.

I currently have this for the side nav itself:

<nav id="nav_sidebar" class="sidenav bg-light" data-mdb-color="dark" data-mdb-mode="side" data-mdb-scroll-container="#nav_sidebar_scroller" data-mdb-content=".main_content" transitionDuration="0" data-mdb-expanded="false" data-mdb-hidden="true">

And I am doing some funky initiation stuff for changing modes based on size:

window.addEventListener('DOMContentLoaded', (event) => {
const sidenav = document.getElementById('nav_sidebar');
const sidenavInstance = mdb.Sidenav.getInstance(sidenav);
let innerWidth = null;
const setMode = (e) => {
  if (window.innerWidth === innerWidth) {return;}
  innerWidth = window.innerWidth;
  if(window.innerWidth < 560){sidenavInstance.changeMode('over');sidenavInstance.hide();
} else {sidenavInstance.changeMode('side');if($("#togglesidenav").attr("aria-expanded")=="true"){;}}
window.addEventListener('resize', setMode);

Basically it loads while on the page and then hides itself. Ideally I would like it to load off the page on mobile and just be static (aka normally on the page) on desktop. Any idea what I am doing wrong here?

I have uploaded a a video here to show (only available for 24 hours):

Mateusz Lazaru staff answered 1 year ago

data-mdb-hidden="true" should do the job, but I see it does not. We will fix this soon.

For now try this workaround untill we fix the bug:


#sidenav-1 {


sidenavEl = document.getElementById('sidenav-1')
setTimeout(() => { = 'block'
}, 500)

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: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 4.4.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: Yes