Hello

Try adding the following to the Custom CSS field of your templates parameters...

[code type=css]h1.logo a {background-size: auto auto !important;}[/code]

Ciarán

Well, its working for large screen and for small screen fine,

But if just resize screen to some medium size at some points logo overlaps the menu, so on some computers our clients are complaining about the logo overlaps, I am attaching here picture for reference.

The following will replace the default top menu with the mobile menu for this screen size..


[code type=css]@media only screen and (min-width: 768px) and (max-width: 959px) {
/* Hide default hornav menu */
#hornav{display:none !important;}

/* Show mobile hornav menu */
#container_hornav_mobile{display:inline; position: absolute; z-index: 99; margin-top:13px;}

.js #mobile { display: none; }
.js .selectnav {
display: block;
-webkit-appearance: listbox;
width:100%;
padding:10px;
margin-top:-70px;
margin-bottom:40px;
border-radius: 3px;
-webkit-box-shadow: 0 5px 6px -6px b1b1b1;
-moz-box-shadow: 0 5px 6px -6px black;
box-shadow: 0 5px 6px -6px black;
border:1px solid #EDEDED;
background-color:#F9F9F9;
color:#777777;
}
}[/code]

Ciarán