Topic: mdb-side-nav not working properly

digitalmanagerguru free asked 3 years ago

*Expected behavior*I was expecting something like in this jquery solution:

Where the overlay appears when the sidenav is opened. But the overlay is appearing depending the resolution size, and that doesnt make any sense at all.

*Actual behavior*I am using slim version and I am opening and minimizing and the overlay doesnt shows up.If I resize the window for a lower resolution or mobile the overlay appears. When the overlay appears if I click outside it doesnt remove the overlay and do not minimize the sidenav.

*Resources (screenshots, code snippets etc.)*I'm using for testing the code from here:

The Slim side-nav one.

Here is a snippet where you can see the overlay doesnt work:

And when adding content on the right side:

Still doesnt close overlay. Would be great to solve this asap.

Thank you.

Mikołaj Smoleński staff answered 3 years ago

Hi there again,

I've send you the full code of the working example from the demo application:

There are two slim sidenavs, which as I can read work as You expect or am I wrong?

Please copy the code from our docs and try to use it in your appliaction. It would be much easier then looking for the issue inside your code.

The path of the documentation page: mdbvue\src\docs\pro\Navigation\SideNavPage.vue

If the example is now what you're looking for I'll try to fix your snippet.

Best regards

digitalmanagerguru free answered 3 years ago

Hi again, I guess I was able to understand the concept you guys decided to use in this component.So, basically in Desktop resolution, the sidenav should always appear and should be hidden in lower resolution as tablet/mobiles. And the overlay should only appear on lower resolutions. And for mobile if we still want this sidenav we're oblgied to have an extra button as the hamburger to toggle the visibility of the sidenav. Is that your concept, what is expected?

I've rewrite my code and this is what I got so far:

But there is still one problem left, when I click the hamburger, it doesnt run the toggleSideNav function. Is there an event for when we click outside to close the overlay? because I wanted to run another code on that action, and I wanted to avoid using extra js for that.

Because I want the content to be always visible and not cropped by the sidenav. (at least for tablets) for mobile I am fine with the crop.

PS: I guess I'll use the breakWidth and move on. That way it will always be visible to all resolution wider then 768 and below that, there is no problem to be above the content.

Btw the API docs says: <mdb-side-nav breakWidth="770" ... /> should be <mdb-side-nav breakWidth=770 ... />

Extra question: Is there a way to use other types of fontawesome icons on "slimIcon"? (I would like to use duotone)


digitalmanagerguru free answered 3 years ago

What I am reporting is the slim mode. It doesnt work when using slim. The Docs only shows the normal mode with an hamburger icon. So it is not the same thing at all...

Please check the slim mode. Thank you.

EDIT: I've found out that the culprit is this code on the example here


If I put instead :OpenedFromOutside.sync="toggle" and use that toogle to swtich with an hamburger icon it works fine. But what I wanted is to not have an hamburger icon to toogle it, I want the sidebar always visible, but it would be slim closed or opened. Thats it. As the example on the link above.

Mikołaj Smoleński staff answered 3 years ago

Hi there,

The working example (same as in the snippet code) is available here:

And here's the code of the left slim sideNav from that docs page:

  <div class="light-blue-skin">
    <mdb-side-nav slim :isCollapsed="collapseC" name="Anna Deynah" :OpenedFromOutside.sync="toggleC" logo="" logoRound sideNavClass="sn-bg-1" mask="strong" hidden>
          <mdb-side-nav-cat name="Submit blog" icon="chevron-right">
            <mdb-side-nav-item href="#" slimIcon="address-book">Submit listing</mdb-side-nav-item>
            <mdb-side-nav-item href="#" slimIcon="address-card">Registration form</mdb-side-nav-item>
          <mdb-side-nav-cat name="Instruction" far icon="hand-pointer">
            <mdb-side-nav-item href="#" slimIcon="blog">For bloggers</mdb-side-nav-item>
            <mdb-side-nav-item href="#" slimIcon="pen">For authors</mdb-side-nav-item>
          <mdb-side-nav-cat name="About" icon="eye">
            <mdb-side-nav-item href="#" slimIcon="handshake">Introduction</mdb-side-nav-item>
            <mdb-side-nav-item href="#" slimIcon="tasks">Monthly meetings</mdb-side-nav-item>
          <mdb-side-nav-cat name="Contact me" far icon="envelope">
            <mdb-side-nav-item href="#">FAQ</mdb-side-nav-item>
            <mdb-side-nav-item href="#" slimIcon="paper-plane" >Write a message</mdb-side-nav-item>
          <mdb-side-nav-item icon="angle-double-left" open-icon="angle-double-right" @toggle="toggleSlimC" toggler :isCollapsed="collapseC" fixed>Minimize</mdb-side-nav-item>

  import { mdbSideNav, mdbSideNavNav, mdbSideNavCat, mdbSideNavItem, mdbContainer, mdbRow, mdbIcon, waves } from 'mdbvue';

  export default {
    name: 'SideNavPage',
    components: {
      return {
        toggleA: false,
        toggleB: false,
        toggleC: false,
        toggleD: false,
        collapseC: false,
        collapseD: false
    methods: {
      toggleSideNav(sn) {
      toggleSlimC() {
        this.collapseC = !this.collapseC;
      toggleSlimD() {
        this.collapseD = !this.collapseD;
    mixins: [waves]

I think the problem could be with the body tag which should be the wrapper for all elements on the page, which is missing in the snippet.

Best regards

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

  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.8.2
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: Yes