Footer sidebar of Material Dashboard 2 (free edition) from Innovative Schedule

I noticed in the demonstration of Creative Tim's Material Dashboard 2 (free version) that the sidebar footer takes up a significant amount of space, up to 360px tall. This causes some menu items to be hidden if the browser window is not tall enough.

Is there a way to remove the footer altogether?

Upon inspecting the CSS classes of the navigation items, it seems that the culprit is:

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

Despite trying to remove the sidebar footer with the class .sidenav-footer, the 360px space still remains occupied. How can I eliminate the sidebar footer and free up this space? Is there an official CSS class for this?

The official documentation does not provide much information on customizing the sidebar.

css

Answer №1

The dimensions of the navigation bar are determined by the specific CSS classes applied to it, notably 

.navbar-vertical.navbar-expand-xs .navbar-collapse
, which are responsible for styling the div containing the list items (ul) within the navbar. The footer itself is a fixed height of 80px, with empty space between it and the navbar. The size of the footer does not directly impact the navbar's display; instead, the issue lies in the insufficient height of the container housing the menu elements.

If you wish to increase the height of this container, you can adjust its CSS properties accordingly. Currently, its height is calculated as 100% of the viewport height minus 360px. To make it taller, consider using a lower value than 360px. Here's an example:

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

Keep in mind that setting the height too low (below 190px, accounting for the navbar header height, footer height, and navbar margin) may cause overflow issues with the navbar items. You can inspect these element heights using the web developer tools.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to hide a fixed header on scroll in a mobile device?

I am facing an issue with my Wordpress site where I want the header to hide when the user scrolls. Despite trying various codes, I have been unable to make it work. The reason for wanting to hide the header is that on mobile devices, it causes scroll prob ...

javascriptcsswordpressjquery-mobile

unable to choose an option if more than one radio button is being used

I am having trouble with two radio buttons that are supposed to select the gender of an applicant and the gender of the applicant's child. Both buttons are not functioning properly. Can someone assist me with this issue? Here is the code I am using: ...

htmlcss

Impact on adjacent div

Within my code, I have two sibling divs that contain additional nested divs as shown below: <div class="btn_lists"> <div class="btn green_btn"> <img src="<?= asset_url() ?>images/escolar_07__1.png" /> </div> & ...

htmlcss

Creating a striking two-tone border pattern in an HTML document

Looking to create a design with a straight line that features two colors and a slanted line in between. Here is an example of the desired result: https://i.stack.imgur.com/9ys6e.png ...

htmlcss

Modify styling of complete list upon clicking in React

For my latest project, I developed a basic todo application using React. One of the key features is that when a user clicks on a checkbox, the corresponding todo item's CSS changes to show a strike-through effect. Additionally, a button appears on hov ...

cssreactjs

Tips for implementing text-overflow ellipsis in an HTML input box?

On my website, I have input fields where I've added the following CSS styling: .ellip { white-space: nowrap; width: 200px; overflow: hidden; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis; text-overflow: ellipsis; } H ...

htmlcssellipsis

All you need to know about the jQuery .css method

I've been struggling to get this script to function properly. Despite searching online, I haven't been able to find a satisfactory solution. $( document ).ready(function() { $("#container").click(function(){ var color = $(this).css("backgro ...

jquerycss

Having trouble positioning the label directly below another label

As a beginner in CSS, I am struggling to align "Low" under "Work". I have not been successful so far. Can someone please provide me with suggestions? Please refer to the screenshot in this link: enter image description here ...

htmlcss

Adjust the dimensions of the initial cell

I need to adjust the size of the initial "generated" cell in a grid. The grid is not present in the HTML markup until JavaScript prints RSS information on it, making it difficult to target specific rows or cells directly. Note: The first element is hidden ...

javascripthtmljquerycsscss-grid

Dimensions of CSS Buttons

On my screen, I have 3 buttons with varying sizes determined by their padding. As the text wraps within each button, they adjust in height accordingly. However, the issue arises when the buttons end up being different heights. Instead of setting a specific ...

htmlcss

Resize the tab header in primefaces to fit your needs

Is there a way to change the height of the tabView's header specifically in primefaces? Take for instance the tabs with headers like "God Father I", "God Father II" on this link, I only want to adjust the height of the header and not the entire tab. ...

cssprimefaces

excess spillage occurring within the table's td elements

Is there a way to apply the overflow property to a cell within a table? http://jsfiddle.net/e8Bxj/ table { width:100px; height:100px; } td.content { overflow:auto; } <table> <tr> <td>hmm</td> </tr& ...

css

How to create a stunning pixel pattern overlay on a website section

I've been exploring how to add a pixel pattern overlay onto a website section similar to what's done on this site: (over the background video image at the top and the image in the bottom section). I'm sure it's a simple process, I jus ...

csswordpress

Internet Explorer and CSS: How to eliminate a highlight that pops up when the button is clicked

Could you please check out this website in Internet Explorer (I've tried it on the latest version as well as older versions.) On the above link, there are two circular buttons at the bottom of the page. In IE, when you click on a button, a semi-trans ...

htmlcssinternet-explorerhighlight

unable to connect css file to document

My index.html file is not reading the style.css file for some reason, even though it is linked. I have added the type and checked the path, but still facing issues. Can anyone help troubleshoot this problem? Thank you. https://i.sstatic.net/xxpBV.png htt ...

javascripthtmlcss

Is it possible to modify the color of a bootstrap navbar dropdown upon clicking?

I am having trouble changing the color of a bootstrap navbar dropdown link when it is clicked. Currently, the color changes to teal for a moment but then reverts back to the default gray. Here is my current CSS: li.dropdown:active { background- ...

csstwitter-bootstrap

What is the most concise way to align one table row in the middle and another at the top?

Is there a way to align different rows in a table vertically with minimal code? I have a table with 3 rows, and I want the first two rows to be aligned vertically to the top, while the third row should be vertically aligned to the middle. If I try to def ...

htmlcss

Adjusting the margin on an element causes a shift in the entire page's

Why is the margin of an h2 element on my page displacing the entire body downward? This seems abnormal since the h2 element is within a div container. Is there a way to address this issue? https://i.sstatic.net/E3CLW.png ...

htmlcss

What is the correct way to display single line code snippets in Firefox?

When attempting to display a single line of code within a code block, the layout appears too close to the line numbers (this issue only occurs in Firefox): https://i.sstatic.net/WXZp7.png The HTML code responsible for this display is automatically generat ...

htmlcss

Adjust the scroll bar to move in the reverse direction

I'm trying to modify the behavior of an overlay div that moves when scrolling. Currently, it works as expected, but I want the scroll bar to move in the opposite direction. For example, when I scroll the content to the right, I want the scroll bar to ...

javascripthtmlcsstypescript