【问题标题】:Sticking bootstrap menu in wordpress在 wordpress 中粘贴引导菜单
【发布时间】:2018-07-27 07:07:39
【问题描述】:

我在 Wordpress 中有这个菜单(它基于引导程序),我希望它在滚动时保持在顶部,但在菜单顶部有一些内容:

图片: 代码:

<div class="menu-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-3">
<a class="navbar-brand" href="https://x">
<img src="logo" alt="Logo" class="img-responsive" title=" Logo">
</a>
</div>
<div class="col-lg-9">
<nav id="site-navigation" class="main-navigation text-right" role="navigation">
<div class="menu-menu-1-container"><ul id="primary-menu" class="menu"><li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8"><a href="http://x">Link</a></li>
<li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="http://x">Link</a></li>
<li id="menu-item-13" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://x">Link</a></li>
<li id="menu-item-12" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="http://x">Link</a></li>
<li id="menu-item-11" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://x">Link</a></li>
<li id="menu-item-10" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="http://x">Link</a></li>
</ul></div>                     </nav><!-- #site-navigation -->
<nav id="mobile-navigation" class="text-center" role="navigation">
<div id="mobile-menu-trigger">
<span></span>
<span></span>
<span></span>
</div>
<div class="menu-menu-1-container"><ul id="mobile-menu" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-8"><a href="http://x">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a href="http://x">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13"><a href="http://x">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-12"><a href="http://x">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a href="http://x">Link</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-10"><a href="http://x">Link</a></li>
</ul></div>                     </nav><!-- #site-navigation -->
</div>
</div>
</div>
</div>

【问题讨论】:

  • 为你提供运行环境中的代码..?

标签: html css wordpress twitter-bootstrap-3


【解决方案1】:

由于您使用的是引导程序,因此您可以将其类“navbar-fixed-top”添加到菜单中。用法示例大家可以看here

如果您只需要在其余内容之上正确显示已附加的菜单 - 只需使用 CSS z-index:

.menu-wrapper {
  z-index:99999;
}

UPD:使用this pattern 在滚动时添加类

【讨论】:

  • 我添加了类并且菜单位于我的内容的顶部,但菜单有 40px 的顶部内容,当我滚动时我希望隐藏它。就像在图片中一样..
  • 您需要使用 css 将缩进添加到菜单:{top:50px}(例如 50px - 它是上面内容的高度),然后,例如添加“sticky”类JS 到上面的内容,并添加 CSS "position:fixed;top:0"
  • 我正在考虑添加 margin-top: 40px (内容行的高度)并在滚动后清除边距,知道我该怎么做吗?
猜你喜欢
  • 2012-09-18
  • 2018-05-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-03-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多