Question

所以，我有点编辑了我下载的主题。我的变化不大，只是背景的一些颜色代码。

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

我只是试图使黑色延伸，但保持徽标定位和菜单项目在当前水平

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>

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

排查我的手机背景？

1 个答案: