Make my website logo adapt different resolutions

Question

I'm currently building a website (wesurf.co.il) and I'm having some trouble with the logo part. Im trying to make the logo stay on the left side ( next to the central menu). while on 1920x1080 it looks good, in other resolution's the logo just blend with the menu or dissapearing. thanks for helping.

Answer 1

http://prntscr.com/l3zprs你可以像这样设置<a> </a>和<img/>

Answer 2

Try this code hope it will help :

<div style="display:flex; align-items: center; background:#888;">
  <div class="logo-img"> logo </div>
  <div class="menu" style="margin:auto;"> menu </div>
</div>

Answer 3

You can use this CSS. Also, you should use a SVG logo so it can scale on any device.

.logo-img {
    width: 100%;
}
#header .nav-main.boxed{
    max-width: 843px;
}
#header .logo {
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
    width: calc(100% - 873px);
}