Menu icon Foundation
Issue with menu height and colour

Hi, I was wondering if anyone could help with a couple of points. Much appreciated if you can:

1. After changing the height of .top-bar when you reduce the width of the page you can see some of the menu dropdown within the bar (a grey bar under the logo). It's as if it's overlapping and needs to be shifted down. And when you click on a link the top bar colour changes. Where can I find the code to resolve this?

2. I was also wondering if it would be easy enough to change the logo within mobile view to allow space for the menu link?

Cheers

Screen shot 2014 02 26 at 23.18.09  2

            
<!-- Navigation -->
 
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1 class="logo"><img src="img/john-field-logo.png"></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul>
 
    <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="../">Home</a></li>
      <li class="active">
        <a href="collections.html">Collections</a>
        <!--<ul class="dropdown">
          <li><a href="../">Home</a></li>
        </ul>-->
      </li>
    </ul>

    <!-- Left Nav Section 
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul> -->
  </section>
</nav>
 
  <!-- End Top Bar -->
         

topbarlogo

Hi, I was wondering if anyone could help with a couple of points. Much appreciated if you can:

1. After changing the height of .top-bar when you reduce the width of the page you can see some of the menu dropdown within the bar (a grey bar under the logo). It's as if it's overlapping and needs to be shifted down. And when you click on a link the top bar colour changes. Where can I find the code to resolve this?

2. I was also wondering if it would be easy enough to change the logo within mobile view to allow space for the menu link?

Cheers

Screen shot 2014 02 26 at 23.18.09  2

            
<!-- Navigation -->
 
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
      <!-- Title Area -->
      <li class="name">
        <h1 class="logo"><img src="img/john-field-logo.png"></h1>
      </li>
      <li class="toggle-topbar menu-icon"><a href="#"><span>menu</span></a></li>
    </ul>
 
    <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li><a href="../">Home</a></li>
      <li class="active">
        <a href="collections.html">Collections</a>
        <!--<ul class="dropdown">
          <li><a href="../">Home</a></li>
        </ul>-->
      </li>
    </ul>

    <!-- Left Nav Section 
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul> -->
  </section>
</nav>
 
  <!-- End Top Bar -->