Foundation Navigation Bar blocking form fields

Question

So this seems like a dumb problem to have. I may be going about it wrong so if anyone could suggest another way of doing this i would love to try it out.

I have a FIXED Navigation bar built with 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>

The image that is displayed for the title is larger than the navigation bar. I actually like it hanging down from the nav bar and i have a media query setup to remove it on smaller screens so it is not hanging over content.

Problem: The <div class= "fixed"> wraps the navigation bar and the image all the way across the page. Because the image hangs below the nav bar anything behind it is not clickable. the entire top part of the page is unclickable. For a form i am unable to select a text box to edit. Because the navbar is fixed it affects the entire page depending on how far you have scrolled. Is there a way to have them fixed but without having the fixed tag grab all the empty space? Is there another way to do this?

Answer 1

Try adding position: relative; to your image.

Answer 2

I did Solve this after much research. here is the code to solve the issue or at least what i hacked together to get what i want. This is the navigation bar.

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

I separated the icon and the Text but kept both of them as links to the home page. Giving the illusion that they are both part of the title. There is a media query that hides the image and removes the margin on the title. And Here is the CSS. I basically searched around the html and css files of the site until i found the "fixed" class and stole the css modification and then changed the width to be small so it does not mask everything else.

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

}