Suppress mobile menu in transparent mobile header

Hi, guys.

Have gotten a couple code snippets from old support issues. One to keep my header transparent at all screen sizes:

@media only screen and (max-width: 766px) { 
  .responsive #top #main {margin-top: -80px!important;}
  #top #wrap_all .av_header_transparency {background-color: transparent!important;}
  div#header_main > .container {display: block !important;}
  }

and one to suppress the mobile menu at all screen sizes:

@media only screen and (max-width: 989px) and (min-width: 768px)
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: block !important;
}

.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
    display: none !important;
}

Works pretty good, but if I reduce the width of my browser from wide to it’s most narrow (or view on iPad Pro 10.5” portrait) there is a gap in the screen size where the transparency changes to a black header and then resolves itself as you go more narrow. Is there a simple fix that will allow the header to remain transparent thru the entire range. This behavior is the same on all browsers tested.

Link to the site is in private content.

Thanks!
Bernie

• This topic was modified 5 years, 6 months ago by berniedidit.