3 bar menu issue

Hi, I love, love this theme. Ive been trying for hours to get the 3 bar menu and logo aligned in responsive mode, my logo and 3 bar menu are not aligned on tablets and mobile, here is a picture: here

as you can see, in example A, the three bar menu creates a huge space from the top and falls below the logo but the logo is where it should be

only when I scroll down, the logo and three bar menu lines up and the header becomes smaller, but I want it aligned without having to scroll down.

in the picture, example B, this is what I am needing to do.
how can I get the three bar menu and logo aligned as shown in example B

my site is spirituallight.guru

any help would be greatly appreciated.

Here is the css I’m using

h3.assistive-text {
     display: none;
}

.entry-content {
     font-size: 0.8em;
     line-height: 110%;
}

.sd-content {
     padding-top: 20px;
}

.navbar-wrapper .navbar h2, h2.site-description {
  display:none;
}

.navbar-inner .social-block {
  display:none;
}

@media (max-width: 979px){
  .tc-header .brand {
    float: left; width: 80%; text-align: left;
    padding-left: 10px;
    position: relative;
    z-index: 100;
  }
  .tc-header .navbar-wrapper {
    z-index: 99;
    position: relative;
    float: none;
  }
  .nav-collapse, .nav-collapse.collapse {
    top: 100%;
  }
  .navbar .navbar-inner {
    margin: 0;
  }
  .navbar .btn-navbar {
    margin: 9px 0;
  }