Move Knack main navigation to the left

Here is a free code for improving Knack apps interface.

Click here to see it in action

/*########Move Navigation to left - Sidebar#############################*/

html,body, .kn-content {
height: 100%;
}

.kn-content {
position: relative;
}

.kn-info{
margin-left: 300px;
}

.kn-info .kn-current_user{
padding-right: 12px;
}

@media screen and (min-width: 769px){
#kn-app-header{
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 250px;
}
.kn-section .kn-container{
margin-left: 300px;
}
}

#app-menu-list li{
width:100%;
}

This is really close to what I'm looking for. When I try it, though, the logo doesn't go to the top - it's gets squished to the side (left). Also, how do I make sure the dropdown menus pop to the right instead of straight down?

It did not work for me.I do not know how you did it because the main content is overlapping the side menu.

This works well - thank you