ephra

Hi Kharis, thanks for your respons, I will have a look at it gladly.
I think I made very unstructured css to get the menu as close as I want (especially in mobile view very hard). But I think I didn’t use the right css-selectors.

I can give you a link of the testsite, but there is a login (-this is own server from the company I work), I cannot give username/password when there’s no option for a private message unfortunately? When there is I can provide.

But I will put here the css I used. And screenshot, so you’ll have an idea.
For now I just have set the ‘sydney-hero-area’tot display:none. So that the menu works.

Thank you and regards,
Esther

.site-logo {
  max-height: 179px !important;
}

.site-header.fixed.float-header .site-logo{
  max-width: 180px !important;
 }

.site-header.fixed.float-header .site-logo-middle-menu {
top: -27px;
}

.site-header.float-header {
padding:5px;
}

#mainnav ul {padding-top:20px;}

.site-header.fixed.float-header #mainnav ul{
padding-top:0px !important;
}

#mainnav ul li a {
	letter-spacing:1px;
text-shadow: 1px 1px 6px rgba(35,40,45,0.7);
}
#mainnav ul li a:hover{
color:#0080ff !important;
text-shadow:none !important;
}
#mainnav ul > .current-menu-item a {
color:#0080ff !important;
text-shadow:none !important;
}

.site-header.fixed.float-header #mainnav ul li a {
font-size:15px !important;
}

#mainnav > ul > li > a {
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}
@media screen and (min-width: 1025px){
.site-header.fixed.float-header {
opacity:0;
animation:mySlide 1s linear 1s forwards; 
}
@keyframes mySlide {
  from {opacity:0}
    to {opacity:1}
}
}
.site-header.fixed.float-header {  
    
    border-bottom: 1px solid rgba(255,255,255,0.15) !important;
    
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#80ac7d+0,80ac7d+1,00537b+100&1+0,0.55+100 */
background: -moz-linear-gradient(-45deg, rgba(128,172,125,1) 0%, rgba(128,172,125,1) 1%, rgba(0,83,123,0.55) 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, rgba(128,172,125,1) 0%,rgba(128,172,125,1) 1%,rgba(0,83,123,0.55) 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(128,172,125,1) 0%,rgba(128,172,125,1) 1%,rgba(0,83,123,0.55) 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ac7d', endColorstr='#8c00537b',GradientType=1 ) !important; /* IE6-9 fallback on horizontal gradient */
}

@media only screen and (max-width:1024px){
#masthead {
height: 60px;
}
}

@media only screen and (max-width:1024px){
.site-header{
position:fixed !important;
background-color:transparent !important;
top:32px;
}
}
@media only screen and (max-width:1024px){
.site-header.fixed{
position:fixed !important;

}
}
@media only screen and (max-width:1024px){
.site-header.fixed.float-header{
position:fixed !important;
top:0px !important;
}
}
@media only screen and (max-width:1024px){

  .header-wrap .btn-menu{
    float: right;
    margin-right: 30px;
    margin-top: -75px;
  }  
  
  .site-header .col-md-8 {
      position: absolute;
      top: 78px;
      left: 0;
  }  
.site-header .header-wrap .col-md-4  {
position: absolute;
top:1px;
left:0px;
margin-bottom:0px;

}  
}
@media only screen and (max-width:1024px){
.site-logo {
max-height: 110px !important;
margin-top:0px !important;
}
.site-header.fixed.float-header .site-logo{
  max-height: 70px !important;
float:left;
 }
}

menu-mobile1
mobile-menu2
desktop-menu1
desktop-menu2
tabletmenu-wrong