Menu overlapping logo

Hey,

I have a problem with the header of my site.
On tablets the menu is overlapping the logo.

I have activated the header mobile menu.

I am using the large header size and the following CSS:

.iconbox .iconbox_content .iconbox_content_title { text-transform: none; }
.iconbox .iconbox_content .iconbox_content_title { overflow: visible; }

html.fixed_header #main {
padding-top: 0px;
}
#header_main .container> li a, .logo img, .logo a {
height: 97px !important;
line-height: 150px !important;
max-height: none !important;
}

h1, h2, h3 {
text-transform: none !important;
}

.main_color .avia-icon-list .iconlist_icon {
background-color: darkorange;
}

.main_color .iconlist_content {
color: #666666;
}

.avia-caption {
right: 17px !important;
left: auto;
}

Thanks a lot for help!