This does the trick for 979px and above, but I don’t know how to make it work for 600px and above:

.btn-toggle-nav { display: none; }
@media (max-width: 979px){ .btn-toggle-nav{ display: block;} }

My page is www.ecsl-sports.eu

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;
}

First of all the website: ungtest.atjordans.se (will be moving to a different domain and server on Monday)

On my desktop version of the site, the logo is on the left, but in responsive mode (on mobile and tablets) it centers. Aswell, the 3-bar menu button is always justified to the lower left of the header. I would like to see the 3-bar button aligned with the logo in responsive mode.

Basically I want the header to look like its does when I scroll the page. Similar to the sticky header but with blue/yellow instead of black/white.

Other than this issue I’ve come to love working with the customizr theme.
Thanks.

I want to create the 3-bar menu button to add it in other resolutions with @media queryes, i just can change the look of the inside the menu, but i dont know how to create the button.

Thank you very much!