-1

I have purchased the following wordpress theme: http://themeforest.net/item/healthpress-health-and-medical-wordpress-theme/full_screen_preview/3138064

I need to make the navbar extend along the entire width of page, can someone help? Here's an image to show what i'm trying to do and Here's the CSS code for the navbar.

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; }

Any help will be highly appreciated.

4

2 回答 2

0

这会成功的。

#header {
width: 100%;
height: 150px;
margin: 0px auto;
position: relative;
}
于 2012-12-04T16:21:13.503 回答
0

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

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

https://codex.wordpress.org/Child_Themes

于 2018-01-10T18:53:28.827 回答