title: Foundation 5: top-bar - change the background and hover style for the mobile menu
body: <p>I have successfully changed the top-bar to look how I want it. But when collapsed, the mobile menu does not show the same colors (I want to use a white bg, and a simple hover, but the bg is dark grey (should be white), and the hover is white, which is correct) I can't see where to change them!</p>
  
  <p>Here's what I have so far:</p>
  
  <p>HTML</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="nav-contain"&gt;
    &lt;div class="contain-to-grid"&gt;
      &lt;nav class="top-bar" data-topbar&gt;
        &lt;ul class="title-area"&gt;
          &lt;li class="name"&gt;&lt;h1&gt;&lt;a href="/"&gt;SITE TITLE&lt;/a&gt;&lt;/h1&gt;&lt;/li&gt;
          &lt;li class="toggle-topbar menu-icon"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
  
        &lt;/ul&gt;
        &lt;section class="top-bar-section"&gt;
          &lt;ul class="left"&gt;
           &lt;ul&gt;
            &lt;?php foreach($pages-&gt;visible() AS $p): ?&gt;
              &lt;li&gt;&lt;a&lt;?php echo ($p-&gt;isOpen()) ? ' class="active"' : '' ?&gt; href="&lt;?php echo $p-&gt;url() ?&gt;"&gt;&lt;?php echo html($p-&gt;title()) ?&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;?php endforeach ?&gt;
          &lt;/ul&gt;
        &lt;/ul&gt;
      &lt;/section&gt;
    &lt;/nav&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <pre><code>//Background color for the top bar
  $topbar-bg-color: #fff;
  $topbar-bg: $topbar-bg-color;
  //Height and margin
  $topbar-height: 45px;
  $topbar-margin-bottom: 50px;
  
  $topbar-title-weight: 300;
  $topbar-title-font-size: rem-calc(17);
  
  //Set the link colors and styles for top-level nav
  $topbar-link-color: #333;
  $topbar-link-color-hover: #333;
  $topbar-link-color-active: #222;
  $topbar-link-color-active-hover: #fff;
  $topbar-link-weight: 300;
  
  $topbar-link-font-size: rem-calc(16);
  $topbar-link-hover-lightness: 0%; // Darken by 10%
  $topbar-link-bg: $topbar-bg;
  $topbar-link-bg-hover: #fff;
  $topbar-link-bg-active: $primary-color;
  $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: 0%);
  $topbar-link-font-family: $body-font-family;
  $topbar-link-text-transform: uppercase;
  $topbar-link-padding: $topbar-height / 3;
  
  $topbar-menu-link-weight: normal;
  $topbar-menu-link-color: #333;
  $topbar-menu-icon-color: #333;
  $topbar-menu-link-color-toggled: #333;
  $topbar-menu-icon-color-toggled: #888;
  </code></pre>
  
  <p>Custom CSS</p>
  
  <pre><code> .nav-contain {
    margin-top: 30px;
    }
    .top-bar .top-bar-section li:hover &gt; a {
      text-decoration: none;
      position: relative;
    }
    .top-bar .top-bar-section li:hover &gt; a:after {
     content: '';
  
     width: 100%;
     position: absolute;
     left: 0;
     bottom: -2px;
  
     border-width: 0 0 1px;
     border-style: solid;
   }
  </code></pre>