如何讓我的導航欄擴展/擴展整個頁面？

-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

如何讓我的導航欄擴展/擴展整個頁面？

回答

相關問題