0

我有一个基于 TB 的 WP 主题。我想在滚动时将菜单导航固定在屏幕顶部。创建者没有为菜单使用导航栏类。相反，有一个#menu id，因此使用通常的 navbar-fixed-top 解决方案不起作用。这是下面标题的标记。我希望有人能阐明我是如何做到这一点的，特别是如果它可以使用 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>

4

1 回答 1

0

经过数周的搜索和尝试在 Banshee 主题中创建固定导航/菜单栏的解决方案后，我终于找到了它。对于其他一直试图弄清楚这一点的人，我将其发布在下面。很难找到的原因是 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 建议不适用于此解决方案，因为它不使用 navbar-fixed-top 类。

希望这可以帮助其他人。但是……</p>

新问题：

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

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

于 2013-11-09T21:04:11.617 回答