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

-2

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

任何帮助将得到高度赞赏。

来源

2012-12-04 Abdullrhman Reda Barkook

[你尝试过什么？]（http://whathaveyoutried.com） –

我试图改变利润，位置，宽度比100％，并为等效的像素比例较高，尝试添加垫衬这只增加了导航栏的右侧部分，而左侧则保持不变或不变。 –

这将做到这一点。

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

来源

2012-12-04 16:21:13

谢谢你的评论，我试过这样做，但没有奏效，可能是因为还有其他价值超过它或什么的？ –

你是如何实现它的？因为它为我工作？ –

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

我建议把你的覆写放在儿童主题中。

https://codex.wordpress.org/Child_Themes

来源

2018-01-10 18:53:28

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

回答

相关问题