html - 调整大小时使 Nav 低于 H1

Question

我正在构建一个相当简单的网站，我需要它具有一定的响应能力。

现在，当我调整浏览器大小时，导航菜单与 Logo 标题重叠，变得非常困惑。

HTML:

 <div class='header'>
    <header>
      <h1><a href="/">Prince Innocence</a></h1>
    </header>
    <nav class='main'>
      <ul>
        <li><a href="/music/">Music</a></li>
        <li><a href="http://princeinnocence.bigcartel.com">Store</a></li>
        <li><a href="/shows/">Shows</a></li>
        <li><a href="/videos/">Videos</a></li>
        <li><a href="mailto:princeinnocence@gmail.com">Contact</a></li>
      </ul>
      <ul class='social'>
        <li>
          <a href='http://www.youtube.com/princeinnocenceband' target=_"blank">
            <span class='icon-youtube'></span>
            <span class='hidden'>Youtube</span>
          </a>
        </li>
        <li>
          <a href='http://www.instagram.com/Prince Innocence' target=_"blank">
            <span class='icon-instagram'></span>
            <span class='hidden'>Instagram</span>
          </a>
        </li>
        <li>
          <a href='http://Prince Innocence.tumblr.com' target=_"blank">
            <span class='icon-tumblr'></span>
            <span class='hidden'>Tumblr</span>
          </a>
        </li>
        <li class='soundcloud'>
          <a href='http://www.soundcloud.com/Prince Innocence' target=_"blank">
            <span class='icon-soundcloud'></span>
            <span class='hidden'>Soundcloud</span>
          </a>
        </li>
        <li>
          <a href='http://www.twitter.com/Prince Innocence' target=_"blank">
            <span class='icon-twitter'></span>
            <span class='hidden'>Twitter</span>
          </a>
        </li>
        <li>
          <a href='http://www.facebook.com/Prince Innocence' target=_"blank">
            <span class='icon-facebook'></span>
            <span class='hidden'>Facebook</span>
          </a>
        </li>
      </ul>
    </nav>
  </div>

和 CSS:

.header {
width: 100%;
background: rgba(30, 30, 30, 0.6);
padding: 25px 0 20px 25px
}

.header h1 {
padding-right: 30px;
color: white;
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
font-style: italic;
text-transform: uppercase;
color: #cccccc;
font-size: 300%
}

.header nav {
position: relative;
text-align: right;
margin-top: -50px;
margin-right: 30px
}

.header a, .header a:visited, header a:active {
color: #cccccc;
text-decoration: none
}

.header nav li {
display: inline;
padding: 0 5px 0 0
}

.header nav li a {
text-decoration: none;
font-size: 100%;
text-transform: uppercase;
color: #cccccc;
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s
}

有什么想法吗？谢谢!

Answer 1

您在 .header nav 中的 nav 元素上声明了负边距

.header nav {
    position: relative;
    text-align: right;
    margin-top: -50px; /* <-- THIS */
    margin-right: 30px
}

如果你把它拿走或者把它改成更接近于 0 的东西，你应该有更少的重叠