Burger Menu Logo Showing In Main Navigation/Footer Menu

and do not rule it by media query but only with the different selectors:

#avia-menu .only_mobile {
  display: none;
}

and for the footer:

#menu-main-menu .only_mobile {
  display: none;
}
/ *** or ***/
#footer-page .only_mobile {
  display: none;
} 

because the menu on desktop got an ID and the burger menu is inside .av-burger-overlay and got the id: av-burger-menu-ul

by the way: I can understand it in the case of the hamburger menu, because here it is a copy of the main menu.
But you must have created your footer menu as an extra menu. Why did you put the logo there?

please do clear all cachings

do not rule it by media query but only with the different selectors

you have still this inside your css: – please remove it

@media only screen and (max-width: 767px) {
  .responsive #top .av-main-nav .menu-item {
    display: none;
  }
}

this works great on DEV Tools for your staging page – if you got different selectors or settings for the page itself – then you have to give us the final link

#avia-menu .only_mobile {
  display: none;
}
#footer-page .only_mobile {
  display: none;
} 

there is still something wrong:

I’ll try again – please read it carefully
The menu you see above as a text menu and the menu you see in the hamburger menu have the same source but different selectors. So you don’t need to set up a media query to hide the logo in the top text menu. This is particularly advantageous in your case, as given the nature of your text menu, it would certainly be better to display the hamburger menu earlier (1085px) than would be possible at 768px. Your text menu overlaps the main logo long before it displays the hamburger icon.

for having an earlier hamburger icon you only need here a media query setting:

@media only screen and (max-width: 1085px) {
    #top #header .av-main-nav > li.menu-item  {
        display: none !important;
    }
    #top #header .av-burger-menu-main {
        cursor: pointer;
        display: block !important;
    }
}

Remove all media query settings for your only_mobile logo from your Quick CSS, with the exception of the existing global rule.
(This is why it already works for the footer area.)

.only_mobile {
  display: none;
}

you now only have to show it again for the hamburger menue:

#av-burger-menu-ul .only_mobile {
  display: block;
}

thats all.

btw: here are the selectors for your logos inside your menues:
top text menue: #avia-menu .only_mobile
hamburger menue: #av-burger-menu-ul .only_mobile
footer menue: #menu-main-menu .only_mobile

next hint:
you can have it for smaller screens this way – and only for very small screens in a single row.

@media only screen and (max-width: 767px) {
  #footer-template .entry-content-wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 20px 0
  }
  #footer-template .entry-content-wrapper:before,
  #footer-template .entry-content-wrapper:after {
    display: none;
  }
  #footer-template .entry-content-wrapper .flex_column {
    flex: 0 1 48%;
    width: unset !important;
    margin: 0;
  }
  #footer-template .entry-content-wrapper .flex_column.first {
    flex: 1 1 100%;
  }
}

@media only screen and (max-width:449px) {
  #footer-template .entry-content-wrapper .flex_column {
    flex: 1 1 100%;
  }
}