Transparent header for tablets

OK. There is an Enfold bug. I found a workaround, but it is a bug.

When I invoke transparent header under “Main Menu -> Menu Items For Mobile” at 767px, it works fine. When I use the following code, it works perfectly up to 767:
/* Transparent Header For Mobile */
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }
}

That is a problem for my site as I need a transparent menu for iPads and tablets. I have spent most of a day playing working on this. Let me summarize:

When I invoke transparent header under “Main Menu – Menu Items For Mobile” at 990px, the transparent header does not work at any width from 1-990. It is completely broken. It should still work up to 767px if I do not change the CSS. It does not.

When I change the CSS to 990px, as shown below, it is still broken at all widths from 1-990px. The code looks like this:
/* Transparent Header For Mobile */
@media only screen and (max-width: 990px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }
}

However, if I leave the setting under “Main Menu – Menu Items For Mobile” at 767 and use the following code, it works at all widths including iPad widths:
/* Transparent Header For Mobile */
@media only screen and (max-width: 1200px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }
}

NOTE: There is nothing magical about 1200px. It is the width at which my text menu bumped up against my logo. So, I want the burger menu at 1200px, which I accomplished with the code at the bottom of this reply.

So, I think there is a problem with the theme code under the “Main Menu – Menu Items For Mobile” setting. I have found a workaround after an entire 8-hour day. But, you may want to look into what is happening here.

For anyone else working on this problem, I invoked the burger menu at 1200px by the following CSS:
@media only screen and (max-width: 1200px) {
.menu-item {
display: none!important;
}
.main_menu {
display: block !important;
}
.av-burger-menu-main.menu-item-avia-special {
display: block!important;
}
}

• This reply was modified 3 years, 8 months ago by rmatus. Reason: Added CSS for the burger menu