使标题菜单固定位置（主题tesseract）答案

【问题标题】：make header menu a fixed position(theme tesseract)使标题菜单固定位置（主题tesseract）
【发布时间】：2015-08-03 12:26:19
【问题描述】：

我正在尝试将 tesseract 主题 (http://tyler.com/) 上的标题菜单设置为 固定位置，这样如果您向下滚动，就可以从网站上的任何位置访问所有菜单元素.

我已经尝试了一些事情，并且总是将position:fixed; 添加到主题的几个 css 类中，但什么也没发生。

如果您能帮我解决这个问题，我会很高兴。提前致谢

【问题讨论】：

检查我的答案。我刚刚验证过了。

标签： html css wordpress

【解决方案1】：

删除position: relative;

添加

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

【讨论】：

【解决方案2】：

将此代码从position: relative 修改为position: fixed

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

现在为了避免最重要的内容被隐藏：

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

输出

【讨论】：

我该怎么做？我不知道任何PHP。如果我将此添加到 style.css 文件中，则不会发生任何事情。
转到 style.css，搜索此代码并仅编辑相关文本以修复。最好的方法是使用子主题，因为您使用的是 WordPress。
在 site-banner.css http://tyler.com/wp-content/themes/TESSERACT-Merge-Test/css/site-banner.css
非常感谢......它正在工作。最后一个问题：顶部的背景栏现在变小了。我应该编辑哪个类以使其恢复到原始大小？

【解决方案3】：

将位置固定到一个 div 而不是在每个元素中

检查这个fiddle

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

【讨论】：

对不起瑞克，这不是他想要的。

【解决方案4】：

你可以试试：

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

这应该会将您的菜单固定在顶部，并且它会在您滚动时跟随您。

【讨论】：

这种情况下是哪个类？网站导航？或者我应该将它添加到“顶部区域”中包含的所有类中
位置和顶部只需添加到控制菜单的任何类中。