ul {
  li:not(.has-form) a:not(.button) { // this targets the colour of your list items in the navbar
    background-color: #whatevercolouryouwant;

    &:hover { // this targets there hover state.
      background-color: #000;
    }
  }
}

.top-bar { background: red }  /* =  just the regular area */

.contain-to-grid { background: yellow }  /* =  the outside area (if you are using this) */

.top-bar-section ul { background: orange } /* = the navigation sections (if you are using) */

.contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button) { background: green }

.top-bar.expanded .title-area

.top-bar.expanded .title-area, .contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button)  { background: green }

// Background color for the top bar
 $topbar-bg-color: purple;
 $topbar-bg: $topbar-bg-color;

 <nav class="top-bar" data-topbar>
          <ul class="title-area">
            <li class="name">

              <span><a href="#"><img class="logo" src="img/omegalogogood.png"></a><span>
            </li>
            <li class="toggle-topbar menu-icon">
              <a href="#">Menu</a>
            </li>
          </ul>

          <section class="top-bar-section">

            <ul class="right">
              <li><a href="#pricing">About us</a></li>
              <li><a href="#">Contact us</a></li>

                <li class="has-dropdown">
                  <a href="#">Services</a>
                  <ul class="dropdown">
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">Print Media</a></li>
                    <!-- <li class="active"><a href="#">Active link in dropdown</a></li> -->
                  </ul>
                </li>
            </ul>
          </section>
        </nav>    

.top-bar {
  .name {
    background: #fff;
  }
}

.top-bar {
  background: #fff;
}