Getting two burger menus on mid-sized screens

i am afraid that your plan to replace the logo with a pixel gif and display a background image instead ( with fake input fields ) will not be successful.
There is something conceptually wrong!

Hm or is it a different page you like to edit?
https://tbwp.hostworks.com/

You have to come clean with yourself somehow, where you would like to have what information.
So what about your search fields? Is there any chance the top header is a position you could live with.

In principle, you could also place a widget in the place where these fields are planned now.
And have the burger for the main navigation on the left.
You should clarify this for you beforehand.

This will solve the double Hamburger for your setting – but the hamburger on the right top is then over the “fake-search-fields”

.av-burger-menu-main.menu-item-avia-special {
  background: #3a5f93;
}
@media only screen and (max-width: 1200px) {
  .container.av-logo-container .avia-menu {
    display: none !important;
  }
}
@media only screen and (max-width: 989px) {
  #top #header #header_main_alternate {
    display: block !important;
  }
}
@media only screen and (max-width: 767px) {
  #top #header #header_main_alternate {
    display: none !important;
  }
  .container.av-logo-container .avia-menu {
    display: block !important;
  }
}