Whole menu can customized to your needs, especially if we talk about colors. Most of changes (also my examples) must be added inside custom.css file (new one inside template /css folder) to make it work.

Background color of menu

By default it's black (0,0,0) with small transparency:

#sp-header { background: rgba(0, 0, 0, 0.8); height: 90px; }

To change to another background color you have to override black with different RGBA color, for example white (255,255,255):

#sp-header { background: rgba(255, 255, 255, 0.8); }

And as a final result you will get this effect (appearance) on photo area:

 

(!) Used in example white background color of menu make this area almost not visible on white sections, you know white on white...

So please select color reasonably.  "0.8" - in code this is a transparency level, you can use all values from 0 to 1.

 

Color of menu items

You can change also this element. Default CSS code:

.sp-megamenu-parent > li > a {
 color: #fff;
 font-size: 18px; 
 line-height: 90px;
 padding: 0 18px; }

 

As you can see few other settings are also defined there (font-size, padding between menu items), not only color (#fff = white).

For example to change color and reduce font size use following code:

.sp-megamenu-parent > li > a { color: red; font-size: 16px; }

Color of active menu item

This background color of active menu item is defined in template settings, in Presets tab.