Sidebar footer of Material Dashboard 2 (free version) by Creative Tim

user_188331 0
Viewed 197

In the demo of Creative Tim's Material Dashboard 2 (free version), the sidebar footer occupies quite a lot of space (up to 360px tall), and some menu items cannot be shown if the browser window is not tall enough.

Is there any chance that I can remove the footer?

I can see from the CSS class of the navigation items, the affecting property is:

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    height: calc(100vh - 360px);
}

However, removing the sidebar footer (the element with .sidenav-footer class) doesn't help and 360px tall is still occupying the space. How to make the sidebar footer goes away and not occupy spaces? Any official CSS class to do so?

In the official documentation, it doesn't really mention anything about the sidebar.

css
1 Answers

The size of the navbar is determined by the classes that you mentioned, .navbar-vertical.navbar-expand-xs .navbar-collapse, which are assigned to the div containing the ul for the navbar. The footer is only 80px tall, and there is nothing but empty space between the footer and the navbar. It has nothing to do with the size of the footer. Rather, the div containing the menu items is too small.

If you want that div to be larger, you can change it's height value. Right now it's calculated as 100 percent the height of the viewer, minus 360px. Change it to something lower than 360px. Try this:

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    height: calc(100vh - 200px);
}

Note that if you use a number that's too low, lower than 190px (the height of the navbar header + the height of the footer + the margin of the navbar), the navbar items may go beyond the area of the navbar. You can find these height values in the web inspector.

user_124887620
Related