Top header fixed navigation bar misbehaving

Hi,

The top header menu bar (sticky) is not working correctly on our site – earthpulse.net
the header image is slipping under the menu on load. and then sticky menu stops being sticky and scrolls up along with the header image.

following current custom css:

#top-logo img {
  max-height: 70px;
}  

#header-extra #header-social-toggle, #header-extra #header-search-toggle {
  background-color: transparent;
  color: #05b0ff;
 }

 #header-search {
  width: 520px;

}

#header-extra #header-social-toggle { display: none; }
#header-social  {
  width: 330px;
}

hr { margin: 0;  }
p:empty { display: none; }

#header-top  {
background:rgb(51,51,51);
background:rgba(51,51,51,.9);
  border-color: #e7e7e7;
  border-width: 0 0 1px;
webkit-box-shadow: 0 2px 2px 0px rgba(68,68,68,0.3);
  -moz-box-shadow: 0 2px 2px 0px rgba(68,68,68,0.3);
  box-shadow: 0 2px 2px 0px rgba(68, 68, 68, 0.3);
}

.widget { 
  -webkit-border-radius: 0px;
  border-radius: 0px;

}

#access-top ul.menu a   {
font-family: 'Raleway', Helvetica, Arial, sans-serif;
font-size: 13px;
float: left;
color: #05b0ff;
}
#access-top ul.menu {
  background-color: transparent;
}

#access-top ul.menu  #menu-item-4564 a {
color: #e313ec;!important
font-weight: bold;
}

@media screen and (min-width: 768px) {
.two-columns #secondary {
	width: 32%;
}

#primary {
	width: 66%;
}
a#scrollup {

  bottom: 80px;
}
.no-sidebar.full-width #primary{
  width: 80%;
}

#secondary .widget,
#third-sidebar .widget {
    margin-bottom: 10px;
    padding-bottom: 10px;

}

#footer-menu ul.menu { text-align:left;}

#hgroup-wrap {
    padding: 0 10px 10px 10px;
}
#site-logo {
    padding-top: 0px;
}

#footer-sidebar { background-color:#4779ff; border: none; text-align: left;}

.widget_nav_menu a, a:visited, a:active {
  margin-top: .461em;
border-bottom: 1px dotted #CCC;
padding-bottom: 5 px;
position: relative;
overflow: visible;
font-size:14px;
}

.widget_nav_menu ul {
    list-style-type:circle;

}

.wp-caption .wp-caption-text:before {
color: #666;
content: none; 
}

.wp-caption .wp-caption-text {
padding: 10px 0 0 0;
text-align: center; }

.wp-caption {
padding: none !important;
background: #fff; }

hr {
   border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

#branding {
    background-color: transparent;
 
}
blockquote p:last-child { margin-bottom: 0; }
blockquote { width: 200px; 
float: right;
 border-left: 5px solid #ccc;
  padding-left:  10px;
TEXT-ALIGN: justify;
 }

#gtranslate {
text-align: center;
padding: 10px 10px 10px 10px;
 }
#gtranslate > h3 { display:none; }
a.gflag img {
  border: 0;
  margin: 2px;
  display: inline;
}

.ngg-gallery-thumbnail img {
  border: none !important;
  display: block;
  padding: none!important;
}

#black-studio-tinymce-6 { padding-top: 0px; }

#u_0_0 { padding-bottom: 1em; }

#tr_credit { display: none; }

.page-id-3926 #branding,
.page-id-3926 #header-menu,
.page-id-3926 #footer-menu {
    display: none;
}
.page-id-4034 #branding,
.page-id-4034 #header-menu,
.page-id-4034 #footer-menu {
    display: none;
}

.button, input[type="submit"], input[type="button"], input[type="reset"], article.post-password-required input[type=submit] {
    background-color: #2A96F8;
color: #fff;
background-image: none;
font-size: 16px;
text-align: center;
    }

h6 { line-height: 100%; }