Shrink 3-Bar Collapse Menu, & Move To The Left.

Hi guys and gals

Site: https://69.175.84.194/~maturesi/wordpress/
?
I want to shrink the 3-bar menu to a smaller size. Then move it to the left of the site before the S-4 logo. And, so when you click it, the menu of links slides from the left side of the page, as opposed to the right.

(I’m a newbie) so I messed up somewhere in the code. When you click the collapse menu it doesn’t vertically display correctly (goes under the header)
I’ve googled around to not much avail, so any help would be massively appreciated as I’m still learning! Thanks -DarkV

Here is the current code in my style.css

/*
Theme Name: Customizr-S4Child
Version: 1.0
Description: A child theme of Customizr
Template: customizr
Author: Administrator
*/
/* Your awesome customization starts here */

/* START OF Move Menu To Left */
.navbar .btn-navbar {
  float: left;
  margin-left: 10px;
.nav-collapse, .nav-collapse.collapse {
  left: 0px;
}

#search {
  float:left;
  width:400px;
  padding:0px 0px;
margin-top:20px;
margin-bottom:auto;
margin-left:-70px;
margin-right:200px;
  background:#fff;
}
background:url() no-repeat;
}
#search form {
margin: 0;
padding: 0;
}

#search fieldset {
margin: 0;
padding: 0;
border: none;
}

#search p {
margin: 0;
font-size: 85%;
}

#s {
  float:left;
  width:500px;
  padding:7px 0px;
margin-top:-57px;
margin-bottom:auto;
margin-left:240px;
margin-right:310px;
}
#feed-q-input {
 display:block;
 height:14%;
 width:25%;
 border:1px solid #d6d6d6;
 background:url('')
 padding:0px 0px;
 font:normal 18px Arial,Sans-Serif;
 color:#ccc;
 margin:0 0;
 margin-top:-57px;
 margin-bottom:auto;
 margin-left:230px;
 margin-right:310px;
 -webkit-border-radius:0px;
 -moz-border-radius:0px;
 border-radius:0px;
 float:left;
 width:200px;
 -webkit-box-sizing:border-box;
 -moz-box-sizing:border-box;
 box-sizing:border-box;
}

#searchsubmit {
width:57px;
float: left;
background:#fff url(https://69.175.84.194/~maturesi/wordpress/wp-content/themes/customizr-s4child/search_icon.jpg);
border:none;
font: normal 100% "century gothic", Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:26px;
margin-top:-57px;
margin-bottom:auto;
margin-left:482px;
margin-right:310px;
}

input#s{
width:250px;
height:10px;
background:;
}

@-moz-document url-prefix() {
.tc-header .navbar-wrapper { width: 70%; margin-left: -5%; margin-right: 0%; }
}

@-moz-document url-prefix() {
.navbar .social-block {
float: right;
margin-top: 0px;
margin-right: -28%;
text-align: left;
}

article.page .entry-header {
    display: none;
}

.carousel .item {
line-height: 132px;
overflow: hidden;
min-height: 788px;
}

/* START OF Change Grey Bar between Navbar and Slider */
header.tc-header {
border-bottom: 1px solid #d6d6d6;
}
/* END OF Change Grey Bar between Navbar and Slider */

.navbar .navbar-inner {
 margin: 14px 20px 10px 400px;
 margin-top: 10px;
 width: 40%;
}

/* START OF Change Header Height */
.tc-header, .navbar-inner {
position: relative;
top: -10px;
left: 0px;
top: -10%;
left: 0p%;
min-height: 40px;
max-height: 40px;
}