基金会导航栏阻止表单字段

Question

因此，这似乎是一个愚蠢的问题。 我可能正在做错事情，因此，如果有人可以建议另一种方法，我将尝试尝试。

我有一个用Zurb Foundation 4内置的固定导航栏

<div class="fixed">
<nav class= "top-bar">
<ul class="title-area">
  <li>
    <h2><%= link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class =>  "logo" ) + "AppDomum",  root_path, :class => "textlogo" %></h2>
  </li>

  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">

<ul class="right">

  #links ..... 

</ul>

标题显示的图像大于导航栏。 我实际上很喜欢它从导航栏悬挂下来，并且我有一个媒体查询设置可以在较小的屏幕上将其删除，因此它不会挂在内容上。

问题： <div class= "fixed">将导航栏和图像包装在整个页面上。 由于图像挂在导航栏下方，因此其后面的任何内容均不可单击。 页面的整个顶部都是不可单击的。 对于表单，我无法选择要编辑的文本框。 由于导航栏是固定的，因此会影响整个页面，具体取决于您滚动的距离。 有没有办法固定它们，但又不用固定标签抓住所有空白空间？ 还有另一种方法吗？

Answer 1

尝试添加position: relative; 到你的形象。

Answer 2

经过大量研究，我确实解决了这个问题。 这是解决问题的代码，或者至少是我一起砍伐才能得到我想要的东西的代码。 这是导航栏。

<div class="fixed">
<nav class= "top-bar">
<ul class="title-area">
  <li>
    <h2><%= link_to "AppDomum",  root_path, :class => "textlogo" %></h2>
  </li>

  <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>

<section class="top-bar-section">

<ul class="right">

  #links ..... 

</ul>
</section
</nav>
</div>
<div class= "fixed-icon">
<%=link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class => "logo" ), root_path %>
</div>

我将图标和文本分开，但将两者都保留为指向主页的链接。 让人幻想它们都是标题的一部分。 有一个媒体查询可隐藏图像并删除标题的空白。 这是CSS。 我基本上在站点的html和css文件中进行搜索，直到找到“固定”类并偷走了css修改，然后将宽度更改为较小，因此不会掩盖其他所有内容。

@media only screen and (min-width: 768px) {

.title-area {
  margin-left: 6em;
}

}

.fixed-icon {
@extend .hide-for-small;
    width: 10%;
  left: 0;
  position: fixed;
  top: 0;
  z-index: 99;
}

.title-area {
  padding: 5px 5px;
  font-weight: bold;
  letter-spacing: -1px;

}