基础导航栏阻止表单字段答案

【问题标题】：Foundation Navigation Bar blocking form fields基础导航栏阻止表单字段
【发布时间】：2013-04-11 22:50:21
【问题描述】：

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

我有一个使用 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"> 将导航栏和图像一直包裹在整个页面中。因为图像挂在导航栏下方，所以它后面的任何内容都不可点击。页面的整个顶部是不可点击的。对于表单，我无法选择要编辑的文本框。因为导航栏是固定的，所以它会根据您滚动的距离影响整个页面。有没有办法让它们固定但没有固定标签占据所有空白空间？还有另一种方法可以做到这一点吗？

【问题讨论】：

标签： ruby-on-rails html css zurb-foundation

【解决方案1】：

尝试将position: relative; 添加到您的图片中。

【讨论】：

Ty Steven 我试过了.. 不高兴。 Fixed 类仍然环绕图像。我需要能够访问固定 div 后面的内容。理想情况下，如果我可以从固定 div 中排除徽标，但仍将其与导航栏中的标题一起固定，则在我的脑海中。

【解决方案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;

}

【讨论】：