基金会导航栏阻止表单域

Question

所以这看起来像一个愚蠢的问题。我可能会错误的，所以如果任何人都可以提出另一种做法，我很乐意尝试。

我有Zurb基金会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

我做了很多研究后解决了这个问题。 这里是解决这个问题的代码，或者至少我为了得到我想要的东西而入侵。 这是导航栏。

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

} 

Answer 2

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