How make logo image responsive?

Hello,

How to make logo image responsive?
In template manager - features - I set up logo as image, but it's overlap navigation on smaller screen (attached screenshot)
site link: test.kuudle.com
Thank you
Regards

Add this to template_css.css

@media (max-width: 767px){
.mp_logo{
clear: both;
}

.mp_logo IMG{
max-width:100%;
}
}

Hi,

Thanks, but this didn't help. Could you take a look www.test.kuudle.com

Thank you
Regards

Try:

@media (max-width: 767px){
.mp_logo{
clear: both;
height:70px;
}

.mp_logo IMG{
max-width:100%;
}
}

Hi,

Thank you, but still overlapping on iPad. I try to add margin and padding to logo and nav but that didn't work

Yes, I see that on my ipad. Try this change :
@media (max-width: 767px){

to

@media (max-width: 769px){