基础导航栏阻止表单字段

Question

所以这似乎是一个愚蠢的问题。我可能会犯错，所以如果有人能提出另一种做法，我很乐意尝试一下。

我有一个使用Zurb Foundation 4构建的FIXED导航栏

<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;

}