double logo in mobile menu

The main, uploaded logo in this website is white. On some pages I've change the logo in the header code to a black logo. I've did this already for many websites, but this time 2 things go wrong:

- You'll see on the desktop version a black line under the logo
- On the mobile version the logo is repeated 

Can somebody help me out?

This is te code I've placed in the header code:

<style>

.header-title{
 background-image:url('https://static1.squarespace.com/static/65cf343da7d0e57f8421179f/t/666870f9d3f2505c2f32e4f9/1718120697480/Logo_RienGriffioen-Zwart.svg');
 background-size: contain
} 
.header-title img{
opacity:0
} 
</style>

-

Many thanks!

If you use the CSS property filter:invert(1); on the logo on the pages where you want it white instead of black it will save you from doubling up on the logo and adding it twice.

If you share your website I can give you the exact code.