iPad menu display issue

Thanks, but I’m not sure it’s doing what it’s supposed to do. There’s a strange blue strip plus the menus doing strange things; some are staying put when scrolling, they are still running over the logo etc.

I’ve added the new piece of code but it’s still causing problems. Here’s all the code in the CSS:

.sub_menu { font-size: 16px; } /* changes the font size of sub menu */
.fixed_header.social_header #main { padding-top: 174px; }
.main_menu ul:first-child > li > a { line-height: 190px !important; }
#header .mega_menu_title { #0e2f61; }

.title_container { background: url(http://www.test.theimplantcentre.com/wp-content/uploads/2014/02/Crumbsbanner41.jpg); }

.avia-heading-row {
color: white;
}
.price-top-margin {
margin-top: 37px;
}

tr th:first-child, tr td:first-child {
vertical-align: top;
}
.main_color tr.avia-heading-row {
background: #2f5691;
}
#header_main, .header_color .main_menu .menu ul li a { background-color: white; }

#header_main, .header_color .main_menu .menu ul li a { background-color: white; }

.tab_titles div {
font-size: 14px !important;
}
.avia_mega_div, .avia_mega_div .sub-menu {
background: white !important;

@media only screen and (min-width: 1140px) {
#top #header .avia_mega_div > .sub-menu > li > ul > li a {
height: 40px !important;
line-height: 25px !important;
}}

#header_main .container, .main_menu ul:first-child > li > a {
height: 143px !important;
line-height: 190px !important;
-webkit-transition: all linear 0.2s;
-moz-transiton: all linear 0.2s;
transition: all linear 0.2s;
}

.header-scrolled #header_main .container, .header-scrolled #avia-menu > li > a {
height: 80px !important;
line-height: 80px !important;
}
#header_main img, #header_main .logo, #header_main .logo a{
width: 252px !important;
height: auto !important;
max-height: none !important;
max-width: none !important;

-webkit-transition: all linear 0.2s;
-moz-transiton: all linear 0.2s;
transition: all linear 0.2s;
}
.header-scrolled #header_main img, .header-scrolled #header_main .logo, .header-scrolled #header_main .logo a{
width: 126px !important;
height: auto !important;
}
.avia-content-slider .slide-entry-title {
display: none;
}
#main > div.main_color.container_wrap.fullsize > div > main > div > div > div.flex_column.av_one_half.avia-builder-el-11.el_after_av_one_half.avia-builder-el-last.column-top-margin {
margin-top: -8px;
}
#av_section_1 > div > div > div > div > div.flex_column.av_one_fourth.first.avia-builder-el-13.el_before_av_three_fourth.avia-builder-el-first > section {
margin-top: 20px;
}

.page-id-75 .avia-section-small .content {
padding-top: 0;
}

.header_color .avia-tt { background-color: white; }
.header_color .ajax_search_image { color: white; }

.header-scrolled .main_menu ul:first-child > li > a { line-height: 58px !important; }

Sorry to hassle but would you mind looking into this when you get a moment. It’s clearly doing something wrong as parts of the menu are moving and others aren’t plus all the headings in the site have become bolder!

Hi

I’ve still got an issue with the longer sub-menu headings http://www.test.theimplantcentre.com/wp-content/uploads/2014/04/Screen-Shot-2014-04-07-at-09.48.05.png