Header and logo in mobile format not working

Hi, I have had a lot of issues with the logo and header in mobile format, which it seems as others have here as well.

If I put in custom CSS

.nav-type-1 #logo {
max-width: 100%!important;
}

This gives a black text name as the logo on phone, not white even though that is the chosen header color text, and the logo is not visible.

If I put in custom CSS

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
#logo .hb-visible-logo img.default {
display: block !important;
}
}

This gives double logo on the computer and no logo on the phone.

The site is shemoments.com

Could you please give a solution for i) showing the site name instead of logo in the correct color and ii) Show the logo on mobile without showing 4 different logos on top of each other on computer screens at the same time