首页 文章

Zurb Foundation 4顶杆固定/粘性高度问题

提问于
浏览 次
1

我正在使用Zurb Foundation 4作为一个网站，我已经使用过它，但我从未尝试过粘性或固定的topbar类 .

问题是，当我将粘性或固定类设置为我的导航包装器时，在浏览器中导航时导航栏的高度变为双倍！ （我使用容器，因为，从文档"To make the top bar stay fixed as you scroll, wrap it in div class="修复“”）

任何人都知道为什么顶杆会改变它的高度？我真的找不到解决方案！

这是代码：

<div class="contain-to-grid fixed"> 
      <nav class="top-bar">
         <ul class="title-area">
            <li class="name">
               <h1><a href="#">Title</a></h1>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
         </ul>
       <section class="top-bar-section">     
         <ul class="right">
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
               <li><a href="#">Link 3</a></li>
               <li><a href="#">Link 4</a></li>
         </ul>
         </section>
      </nav>
   </div>
html css zurb-foundation

2 回答

  • 0

    在自定义CSS中，添加以下内容：

    .row{
    padding-top: 50px;
}

.top-bar {
    position: fixed;
    width: 100%;
    z-index: 100;
}

    这应该会产生一个粘性 Headers ，并使用正确的填充以允许内容在其下开始 .

    像往常一样开始你的内容 <div class="row">content ... </div>

    参考：http://foundation.zurb.com/templates.php#

    回复于
  • 0

    找到解决方案：

    似乎问题是 .contain-to-grid 类的包装div . 如果我将其移除，我可以使用完美的粘性/固定顶杆 .

    当我添加该课程时，我的顶栏会变胖 . 在默认情况下，我发现：

    .contain-to-grid { width: 100%; background: #111111; }
.contain-to-grid .top-bar { margin-bottom: 1.875em; }

    所以我做了一个覆盖

    .contain-to-grid .top-bar { margin-bottom: 0 !important; }

    现在我的顶栏很粘，调整到网格，再次变薄！

    回复于

相关问题