Topic: Advanced Double Navigation with fixed SideNav under fixed Navbar - Example broken

Mawendel pro asked 4 years ago

Expected behavior

Actual behavior I downloaded the sample and this is what it shows: enter image description here

The biggest problem is the gab between the SideNav and the top navbar.

Resources (screenshots, code snippets etc.)

Mawendel pro answered 4 years ago

I can fix the issue with the background by changing the downloaded snippet index.html so it matches ..

I change



<body class="fixed-sn light-blue-skin">

However, that still leaves the GAP. Why is the gap on the downloaded example, but not on ??

enter image description here

Richard free commented 4 years ago

I've got same problem, I changed .side-nav { margin-top: 57px !important; } to .side-nav { margin-top: 45px !important; } to fixe it

Mawendel pro commented 4 years ago

Thanks Richard, that fixed it.

Marta Wierzbicka staff answered 4 years ago


are you sure you initialized the side nav like in this snippet: Please show me your demo, I'll see what is wrong.

Best, Marta

Mawendel pro commented 4 years ago

Hi Marta,

All i did was click on the download button. I unzip the snippet file and click on the index.html. You can simply try and download the example and see for yourself.

I did try to change the body to class="fixed-sn light-blue-skin", which made it look more like your example. But the gap in the screenshot is still there. Just download your snippet example and see for yourself.

Marta Wierzbicka staff commented 4 years ago


you downloaded a snippet and put code to your package? I'm still not sure where is the problem? Is it a problem that sidenav is not working in your package? I mean specifically in your package, in your project. I'd like to help that sidenav will work in your package.

Best, Marta

Mawendel pro commented 4 years ago

  1. Go to
  2. Click download
  3. Unzip snippet
  4. Click index.html on your filedrive
  5. You will now see the screenshot i showed in my first post (does not match!)

Marta Wierzbicka staff commented 4 years ago


I see the problem. It is because when you download a snippet you don't have a class .light-blue-skin in the body tag.

Best, Marta

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: 4.10.1
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes