将Navbar放在徽标上并在缩放时保持位置

Question

将导航栏放在徽标上的最佳方法是什么，以便它正好位于＆＃34; g＆＃34;？

即使浏览器调整大小并且屏幕尺寸不同，它也需要保持该位置，并且不会影响下面的内容。

徽标图像缩小以适应屏幕。

浏览器缩小

https://jsfiddle.net/jypwoaet/

HTML

<div class="container">

  <div id="logo">
    <img src="https://i.imgur.com/3SBvB3a.jpg">
  </div>

  <div id="nav">
    <ul>
      <li>
        Home
      </li>
      <li>
        About
      </li>
      <li>
        Gallery
      </li>
      <li>
        Contact
      </li>
    </ul>
  </div>

</div>

CSS

.container {
  max-width: 960px;
  margin: auto auto;
}

#logo {
  z-index: 1;
  max-width: 650px;
  margin: 2em auto;
}

#logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
}

#nav {
  z-index: 2;
  position: relative;
  display: block;
  width: 100%;
  min-width: 400px;
  height: 50px;
  margin: -12vh auto;
  text-align: center;
  background: gray;
}

#nav ul li {
  display: inline-block;
  padding: 1em;
}

Answer 1

＆＃13;

＆＃13;

.container {
  max-width: 960px;
  margin: auto auto;
}

#logo {
  z-index: 1;
  max-width: 650px;
  margin: 0 auto; 
}

#logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  margin: 0 auto;
}

#nav {
  z-index: 2;
  position: relative;
  display: block;
  width: 100%;
  min-width: 400px;
  height: 50px;
  margin: -16px auto 0 auto;
  text-align: center;
  background: gray;
}

#nav ul li {
  display: inline-block;
  padding: 1em;
}

＆＃13;

<div class="container">

  <div id="logo">
    <img src="https://i.imgur.com/3SBvB3a.jpg">
  </div>

  <div id="nav">
    <ul>
      <li>
        Home
      </li>
      <li>
        About
      </li>
      <li>
        Gallery
      </li>
      <li>
        Contact
      </li>
    </ul>
  </div>
  
</div>

＆＃13;

＆＃13;

＆＃13;

试试这个，jsfiddle