將標題菜單設為固定位置（主題tesseract）

Question

我正在嘗試將tesseract主題（ http://tyler.com/ ）上方的標題菜單固定在一個位置 ，這樣，如果您向下滾動，就可以訪問網站上任何位置的所有菜單元素。

我已經嘗試了幾件事，並且總是添加position:fixed; 到主題的幾個CSS類，但是什么也沒發生。

如果您能在這個問題上幫助我，我會很高興。 提前致謝

Answer 1

從position: relative對於position: fixed編輯此代碼

.home .site-header.no-header-image {
  left: auto;
  position: fixed;
  top: auto;
}

現在，避免隱藏最重要的內容：

.home .site-content {
  padding-top: 60px;
}

產量

Answer 2

您可以嘗試：

.<youClassName>{
    position: absolute;
    top: 0px;
}

這應該將菜單固定在頂部，並且將跟隨您進行滾動。

Answer 3

除去position: relative;

加

.home .site-header.no-header-image {
  position: fixed;
}

Answer 4

將位置固定在div上，而不是每個元素

檢查這個小提琴

HTML

<div id = "menu">
    <ul class = "main">
        <li>
            Home
        </li>
        <li>
            About
        </li>
        <li>
            Contact
        </li>
    </ul>
</div>
<div id = "content">

    CONTENT CONTENT
</div>

CSS

div#menu {
    position: fixed;
    background-color: #0088cc;
    color: #f8f8f8;
    width: 100%;
    height: 50px;
}

ul li {
    float: left;
    margin: 2%;
    list-style: none;
    cursor: pointer;
}

#content {
    height: 1000px;
}