标题导航换行符

Question

我使用这种结构创建了一个使用浮动div创建的网站标题：

nav {
    height:inherit;
    width:100%;
    margin:0 auto;
    position:relative;
    z-index:10;
    text-align: center;
}
#nav-wrap {
    min-width: 100%;
    width: auto !important;
    width:100%;
    white-space:nowrap;
}
nav ul#nav-left, #nav-right {
    list-style-type:none;
    display:inline-block;
    margin:0;
    padding:0;
    width:auto;
    height:100%;
}
nav img {
    display:inline-block;
    padding:0;
    margin:0;
    max-height:225px;
    vertical-align:top;
}
nav ul li {
    display:inline-block;
    text-align:center;
    font-family: 'Oswald',helvetica,arial,sans-serif;
    font-size:1.8rem;
    font-weight:400;
    padding:0 30px;
    margin-top:30px;
}

<nav>
  <div id="nav-wrap">
    <ul id="nav-left">
      <li>Option1</li>
      <li>Option2</li>
      <li>Option3</li>
    </ul>
    <img src="assets/img/img.png" />
    <ul id="nav-right">
      <li>Option4</li>
      <li>Option5</li>
      <li><a href="#contact">Option6</a>
      </li>
    </ul>
</nav>

更新

我一直在玩布局，花车让事情变得艰难。因此，它显示为inline-block没有浮动，但中心徽标仍然没有调整大小，我无法弄清楚我做错了什么。看看下面链接的分阶段网站，看看我的目标。徽标重叠是故意的。

Staged site

我感谢任何帮助或建议。如果可能的话，我想避免使用display:table。

Answer 1

@media查询是您需要的。

@media (max-width: 700px) {
    nav ul li {
        font-size:1.3rem;
        padding:0 10px;
    }
}
@media (max-width: 1200px) {
    nav ul li {
        font-size:1.5rem;
        padding:0 20px;
    }
}
@media (min-width: 1201px) {
    nav ul li {
        font-size:1.8rem;
        padding:0 30px;
    }
}

@media (max-width: 400px) {
    nav ul li {
     /*For this you need to use mobile friendly menu        **/
    }
}