基于Twitter引导程序构建的WP主题 - 需要使用".navbar"的代码的固定导航栏

Question

我有一个基于TB的WP主题。我想在滚动时将菜单导航固定在屏幕顶部。创建者未将导航栏类用于菜单。相反，有一个 #menu id，因此使用通常的导航栏固定顶部解决方案不起作用。下面是标题的标记。我希望有人能阐明我如何实现这一目标，特别是如果可以使用CSS自定义来完成。我是这一切的新手，所以请原谅任何术语的误用并纠正我。非常感谢！

<header style="opacity: 1; margin-top: 0px; ">
<div class="container">
    <div class="row">
    <div class="span3">
    <div id="logo">
            <a href="SITE URL">
                                    </a>
    </div>
    </div>
    <div class="span9">
        <!-- Mobile Menu -->
        <a id="mobile-nav" class="menu-nav" href="#menu-nav"><span class="menu-icon"></span></a>
        <!-- Standard Menu -->
        <div id="menu">
            <ul id="menu-nav" class="sf-js-enabled">
            <li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-9 current_page_item menu-item-14"><a href="SITE URL">Home<mark class="bar"></mark></a></li>
<li id="menu-item-266" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-266"><a href="SITE URL?page_id=252">About<mark class="bar"></mark></a></li>
<li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13"><a href="SITE URL?page_id=11">Blog<mark class="bar"></mark></a></li>
</ul>
</li>
<li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-198"><a href="SITE URL?page_id=196">SITE NAME<mark class="bar"></mark></a>
<ul class="sub-menu sf-js-enabled" style="float: none; width: 20em; display: none; visibility: hidden; ">
<li id="menu-item-569" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-569" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
<li id="menu-item-565" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-565" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
<li id="menu-item-454" class="menu-item menu-item-type-post_type menu-item-object-portfolio menu-item-454" style="white-space: normal; float: none; width: 100%; "><a href="SITE NAME?portfolio=PAGE" style="float: none; width: auto; ">PAGE NAME<mark class="bar"></mark></a></li>
</ul>
</li>
<li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-265"><a href="SITE URL?page_id=257">Contact<mark class="bar"></mark></a></li>
            </ul>
        </div>
    </div>
    </div>
</div>

Answer 1

最后，

经过数周的搜索和尝试解决方案，在女妖主题中创建固定的导航/菜单栏，我找到了它。对于其他任何试图弄清楚这一点的人，我将其发布在下面。之所以这么难找到，是因为Banshee没有使用Twitter Bootstrap内置的选项（navbar-fixed-top）。相反，它使用标头作为要更改的部分以使其工作。

header {
position: fixed; 
width: 100%;
height: 100px;
text-center;
background: #d6c493;
 -webkit-box-shadow:  0px -2px 8px 2px #424756;
 box-shadow:  0px -2px 8px 2px #424756;
 z-index:999;
}
@media (min-width : 980px) {
#main {
padding-top: 80px;
}
}

编辑：其他人建议@media部分，以便我可以删除我的上边距，效果很好。

此代码还在标题下方放置了一个微妙的阴影。必须试验标题高度和边距顶部的值，以使其适用于单个站点，以防从主题的默认值更改（我的被更改）。通常的 TB 建议向正文添加填充不适用于此解决方案，因为它不使用导航栏固定顶部类。

希望这对其他人有所帮助。但。。。

新问题：

使用固定菜单，当我使用 jQuery 滑块（旋转滑块）时，图像在桌面查看大小的菜单下方放置很好，但是一旦我开始缩小窗口大小，图像的大小就会变小，但开始在固定菜单下向上移动。我找不到让他们留在菜单下的位置的方法。如果我添加任何填充，即使我只为顶部指定，它似乎总是增加滑块底部和主体之间的空间。这是一个响应式主题，图像正在响应式调整大小。

请帮忙。非常感谢任何看过的人。