SB Admin 2 CSS Incomplete

Question

See Updates below

I'm having issues with metismenu not acting as a left-side menu-panel. It stretches from left to right, almost as if it thinks it is a bootstrap3 style navbar.

I first encountered this when I tried to use SB Admin 2, but I see the error when just using simple metismenu code from their site.

I am using Django 1.7

Is there something simple I am missing here? I am using it exactly as it is used in this page: http://demo.onokumus.com/metisMenu/index.html

UPDATE I was able to replicate the code in the demo. I had an issue with the CSS, but my problem still persists with the use of it in SB Admin 2 ( http://startbootstrap.com/template-overviews/sb-admin-2/ ). I have the exact same css, code, and JS..

So I guess my question is, does Django do anything that might be messing this up before it gets to my browser? I only ask as I am very new to web programming, and Django.

UPDATE 2 It is a CSS problem. Even though I have the exact same code, using it in the same browser, one of the CSS rules isn't being applied to my code. I have no idea why, if anyone else comes across this problem it is the sidebar rule that isn't being applied:

.sidebar {
    z-index: 1;
    position: absolute;
    width: 250px;
    margin-top: 51px;
}

Answer 1

EDIT Apparently, this may have just been a circumstantial case, because I was unable to replicate the problem when re-downloading the source. Either way, I will keep my solution here.

Ok, so I feel a bit silly that it took me this long to figure it out.

Basically the CSS in the download for SB Admin 2 is not complete. My suggestion, go to the demo site and copy the CSS from there. From what I can tell, it is specifically the CSS rule below that is missing:

@media(min-width:768px) {
    .sidebar {
        z-index: 1;
        position: absolute;
        width: 250px;
        margin-top: 51px;
    }

    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
        margin-left: auto;
    }
}