The button problem is caused by the styles - you have min-width set, that's why they overlap on small screens. Here you can find solution for change sidenav mode on smaller screens: https://mdbootstrap.com/docs/standard/navigation/sidenav/#subsection-mode-transition.

Sorry for the late replay. I was able to resolve the problem with mobile view. It was due to meta tag issue. The side nav is working fine.

Do you have a admin template page with slim side nav when viewed in larger screen(PC), when viewed in smaller screen, the side nav should hide and appear over the content.

But the button are getting tangled with one another in mobile. The below is the image of the button. I have already attached the code snippet.

From what I can see it is enough to change the CSS class from fa-lg to (for example ) fa-3x. You can check other classes for icons here: https://mdbootstrap.com/docs/standard/content-styles/icons/. Can you tell me something more about problems with sidenav on mobile? In the snippet you paste the whole page. This code imports the scripts which cause errors and not everything works.

Unfortunately the snippet you sent doesn't work - you probably didn't click the publish button.