Question

我购买了以下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; }

任何帮助都将受到高度赞赏。

Answer 1

这样就可以了。

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

Answer 2

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

我建议将替换放在子主题中。

https://codex.wordpress.org/Child_Themes

如何让导航栏扩展/扩展整个页面？

2 个答案: