gistfile1.txt

<div class="fixed">
  <nav class= "top-bar">
    <ul class="title-area">
      <li>
        <h2><%= link_to image_tag("officialLogo-100x197.png", :size => "100x197", :alt => "" ) + "AppDomum",  root_path %></h2>
      </li>
      
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

gistfile2.txt

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

I solved it with CSS i was trying to target the text when i should have been targeting the image. I added a class to the image_tag. Then the vertical-align matched up the top of the image with the top of the text. A little counter intuitive to target the logo rather than the text. This added a whole new set of problems that i documented here.. Which i also think i have solved. but it also might go on for another day.. i never know. http://stackoverflow.com/questions/15960231/foundation-navigation-bar-blocking-form-fields

    <h2><%= link_to image_tag("officialLogo-100x197.png", :size => "100x197", :class => "logo") + "AppDomum",  root_path %></h2>

.logo {
@extend .hide-for-small;
vertical-align:text-top;
postition: fixed;
top: 0px;

}