如何在Twenty Twelve WordPress主題中設置固定標題？

開始創建我自己的Wordpress博客後，我一直在修復我的標題。如何在Twenty Twelve WordPress主題中設置固定標題？

我只有輕微暴露於CSS/JavaScript，所以我一直在學習，因此我一直在學習！我想要達到的大部分已經完成了，但我只想嘗試在添加我的帖子之前修正此標頭等。

在Interne上搜索時，我只能真正找到下面的內容並添加這到我的style.css文件;

#masthead {position:fixed; top:0px; margin:auto; z-index:100000; width:100%;}

這現在修復了頁眉圖像和導航到位，但略偏離中心，但我的網頁的其餘部分仍落後於此。一個問題是，圖像的實際背景和導航是不透明..請參見下面

Before code - http://tinypic.com/r/2vxm69t/6 
After code - http://tinypic.com/r/34jd2t1/6

的截圖，我相信我需要我的header.php內可能創建一個單獨的「格」，或修改本某種方式，但tbh，我不能100％確定究竟會做什麼，因爲我從來沒有做過這件事。理想情況下，我在添加此代碼之前在截圖中顯示的導航線添加的行，這將指示標題的底部，當您滾動時，其餘部分將在此下消失。作爲一個整體的背景將保持白色，並在頁面的其餘部分的中心，仍然包括在背景上狂歡的缺口。

!!我必須爲屏幕截圖道歉，這不是很清楚，但我希望這顯示了正在發生的事情，並且足夠清楚，我將盡快舉辦這個活動！

鏈接到我的'style.css'&'header.php'如下 - 如果你需要其他東西，請讓我知道;

style.css - http://codepad.org/c4BnqxlF 
header.php - http://codepad.org/w4z19VLW

我希望有人能幫助我認爲這會很好看我的博客上，然後我可以發帖！

EDIT

修正代碼，現在示出的正確對準和背景，但仍顯示出白色部的標題圖片以上 - 上下面的截圖http://tinypic.com/view.php?pic=126bd7c&s=6

#masthead {background: #FFF;position:fixed; top:0px; height: 350px; z-index:100000; width:960px;} 
#main {margin-top:335px;}

最佳示出的。

來源

2013-04-04 JChutey

更新了我的答案。只需要把它放在邊緣頂部並將其向下移動即可。 – 2013-04-05 01:27:05

你將不得不調整你的代碼，以適合正確，但這是一個例子，你如何能夠執行我認爲你想要實現的。

在你的代碼中，你需要定義背景顏色和圖片+導航的高度。在此之後，您想爲id =「main」創建一個邊距，使其低於您的其他信息，即圖像+導航鏈接的邊距。

更新：加邊距到24px的

#masthead {background: #FFF;position: fixed; top: 0px; height: 350px; z-index: 100000; width: 100%;margin-top: 24px;} 
#main {margin-top:350px;}

參考：http://jsfiddle.net/6VcZe/1/

來源

2013-04-04 23:49:16

謝謝！就在我之後，我認爲我會首先粘貼你的回覆，看看發生了什麼，並在下面添加了@阿德里安的建議，這現在顯示好多了！ #masthead {background：#FFF; position：fixed;頂：0像素; height：350px;的z-index：100000; width：960px;} #main {margin-top：335px;} 現在顯示白色和對齊的背景是正確的。文字滾動時隱藏，標題仍按預期方式固定 http://tinypic.com/r/126bd7c/6 http://tinypic.com/r/2m6n529/6 – JChutey 2013-04-05 01:14:32

仍存在問題不過，我不確定這可能是什麼，儘管測試我的代碼！ 'functions.php'狀態寬度960px，沒有高度說明，但我知道這是250px，我認爲這是好的，因爲這是從主題默認，我沒有修改這一點。此外，我上傳到標題的圖像的實際尺寸與此相匹配。只是不知道爲什麼還有一個白色部分仍然顯示在頂部，也許我可以從'div id = masthead'中排除這個，或者玩某些寬度/高度？會看看！ – JChutey 2013-04-05 01:15:30

如果您在標頭的頂部放置了一個邊距，您可以將其稍微向下移動。更新我的回答 – 2013-04-05 01:22:11

要正確中心對齊你的頭，你需要定義一個寬度爲你的頭的div：「#masthead {寬度：900px}`

這將允許自動保證金技術正常工作，即使沒有位置屬性。

來源

2013-04-05 00:14:41 Adrian

感謝@Adrian欣賞它:)添加您的建議解決了對齊問題！我已經評論了上面的答案，顯示了現在顯示的屏幕截圖，標題圖片上方仍顯示一個白色部分，不知道爲什麼只是測試我的代碼，以爲我會讓你知道:) – JChutey 2013-04-05 01:16:31

如何在Twenty Twelve WordPress主題中設置固定標題？

回答

相關問題