jquery - 对我的手机后台进行故障排除？

Question

所以，我对下载的主题进行了某种程度的编辑。我没有做太多更改，只是一些背景颜色代码。

它工作了一段时间，直到我开始尝试让导航栏从屏幕的左到右一直延伸。

我只是试图让黑色延伸但保持 Logo 定位和菜单项在当前水平位置

CSS

/* CUSTOM CSS */

.site-logo {
  float: left;
  margin-right: 20px;
}
}
.site-header {
background: #000823;
.entry-thumbnail {
  border: none;
}

.entry-title {
  font-size: 20px;
}

body {
  color: #333;
  font-weight: 400;
  font-family: roboto, line-height: 1.8;
  background: #e5f2ff;
}

.wp-caption {
  border: none;
}

.wp-caption {
  background-color: #000 !important;
  margin-bottom: 1.0em;
}

body {
  background-size: contain !important;
}
}
body {
color: #333;
font-weight: 400;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.8;
background: #F5FAFC;
}
#primary {
background: #F5FAFC;
}
#widget-area-2 {
background: #F5FAFC;
.clearfix {
  clear: none !important;
}

.entry-thumbnail {
  border: none;
}

.wp-caption {
  border: none;
}

JSFiddle

Answer 1

导航位于容器包装器 div 内。容器正在限制其内容的宽度。你需要把它拉出来，否则你将无法合理地得到它的全宽。现在您的设置是:

<header>
    <div class="clearfix container">
        <!-- stuff -->
        <nav class="main-navigation" id="main-navigation" role="navigation">
            <!-- nav content -->
        </nav>
    </div>
</header>

你需要的是:

<header>
    <nav class="main-navigation" id="main-navigation" role="navigation">
        <!-- nav content -->
    </nav>
    <div class="clearfix container">
        <!-- stuff -->
    </div>
</header>

在容器外时，导航很容易扩展到全宽。