如何使我的导航栏扩展/扩展整个页面？答案

【问题标题】：How do I make my navbar expand/extend the entire page?如何使我的导航栏扩展/扩展整个页面？
【发布时间】：2012-12-04 16:17:58
【问题描述】：

我已购买以下 wordpress 主题：http://themeforest.net/item/healthpress-health-and-medical-wordpress-theme/full_screen_preview/3138064

我需要让导航栏沿着页面的整个宽度延伸，有人可以帮忙吗？这是显示我正在尝试执行的操作的图像，这是导航栏的 CSS 代码。

http://i.stack.imgur.com/ZLdsF.jpg

#header .main-nav { 
                    height: 21px; 
                    width: 100%; 
                    padding: 0px 0px 20px 0px;
                    margin-top: 90px;
                    background-color:#46a1b4; 
                    background-clip: padding-box; 
                    -moz-background-clip: padding-box; 
                    -webkit-background-clip: padding; 
                    border-radius: 3px; 
                    -moz-border-radius: 3px; 
                    -webkit-border-radius: 3px;  
                    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,0))); /* Saf4+, Chrome */
                    background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* Chrome 10+, Saf5.1+ */
                    background-image:    -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* FF3.6 */
                    background-image:     -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* IE10 */
                    background-image:      -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0)); /* Opera 11.10+ */
                    background-image:         linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,0));
}
.ie7 #header .main-nav{ z-index:9600; }
.page-template-template-home-with-sidebar-php #header .main-nav,
.page-template-template-home-php #header .main-nav{ background-clip: padding-box; -moz-background-clip: padding-box; -webkit-background-clip: padding; position: absolute; left: 0px; bottom: 0px; border-radius: 3px 3px 0px 0px; -moz-border-radius: 3px 3px 0px 0px; -webkit-border-radius: 3px 3px 0px 0px; }
#header .main-nav > ul { float: left; }
.ie7 #header .main-nav > ul { z-index:9700; }
#header .main-nav > ul > li { float: left; border-right: 1px solid #54aec2; position: relative; }
#header .main-nav > ul > li:first-child { border-top-left-radius: 3px; -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; }
#header .main-nav > ul > li:last-child { border: none; }
#header .main-nav ul li a { display: inline-block; padding: 0px 20px; font-size: 13px; line-height: 41px; text-align: center; color: #fff; text-shadow: 1px 1px 0px #20606d; }
#header .main-nav ul li:hover { background-color: #377f8f; background-clip: padding-box; -moz-background-clip: padding-box; }
#header .main-nav ul li ul { display: none; width: 220px; padding: 12px 0px; background-color: #377f8f; position: absolute; top: 41px; left: 0px; z-index: 8899; border-bottom-left-radius: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; }
.ie7 #header .main-nav ul li ul{ z-index:9800; }
#header .main-nav ul li ul li { width: 196px; height: 34px; padding: 0px 12px; position: relative; }
#header .main-nav ul li ul li a { display: inline-block; line-height: 34px; padding: 0px 9px;  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#header .main-nav ul li ul li:hover { background-color: #2c6774; }
#header .main-nav ul li ul li ul { top: -12px; left: 220px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
.ie7 #header .main-nav ul li ul li ul { z-index:9900; }
#header .main-nav .responsive-nav { display: none; width: 100%; margin:10px auto 0px; padding:5px; border:1px solid #CCC; }

我们将不胜感激。

【问题讨论】：

What have you tried?
我已经尝试将边距、位置、宽度更改为高于 %100 的百分比以及以像素为单位的等效值，尝试添加仅增加导航栏右侧部分的填充，而左侧保持不变或不变。

标签： css wordpress navbar

【解决方案1】：

这样就可以了。

#header {
width: 100%;
height: 150px;
margin: 0px auto;
position: relative;
}

【讨论】：

感谢您的评论，我尝试这样做但没有成功，可能是因为有另一个值覆盖它或其他什么？

【解决方案2】：

导航栏的宽度设置为 100%，但它包含在宽度为 980 像素的标题标签中。通过 CSS 覆盖的唯一解决方案是将标题标签的宽度更改为 100%，这将影响整个网站顶部的布局。

我建议将您的覆盖放在子主题中。

https://codex.wordpress.org/Child_Themes

【讨论】：