switch logo media queries

Hi, could you tell me what is the best size for a custom logo … at the moment mine is 200px x 47px, which seems to be too big as in tablet mode the grey hover and active blocks of the menu tabs appear over the logo (so I have had to take them away which is a shame).
I am also trying to solve this problem by replacing the logo in media queries with a small square one but that does not work … see below css

}
@media (max-width:768px){
.custom-logo {background-image:url(https://clivemabey.me.uk/Norfolk4EU/wp-
content/uploads/2019/01/logo_70.png) no-repeat;
display:block;
}
}
@media (max-width:480px){
.custom-logo { background-image:url(https://clivemabey.me.uk/Norfolk4EU/wp-
content/uploads/2019/01/logo_70.png) no-repeat;
display:block;
}
}
I hope you can help
Thank you
Melanie

The page I need help with: [log in to see the link]