There are a few way to make your customizations in UberMenu.
Style Generator
If you want to create a fully custom skin without writing any CSS, you should use the Style Generator.
Please note that the Style Generator will build an entire skin for you, it won’t override colors from existing skins.
Custom CSS
If you want to tweak an existing skin’s colors, you can write a bit of custom CSS to do what you want.
Which color?
There are generally 3 types of colors in the menu, which are controlled by 3 distinct CSS properties. Note that I am using built in CSS colors as examples, but generally you’d use a hex value like this #000000.
Background Color
Generally you would want to change the background color on either the menu bar or the submenu. The CSS property for this is
background: black;
Text Color
You can change the font color of the links in each level of the menu. The CSS property for this is
color: green;
Border Color
You may also wish to change the border color on the menu bar, top level menu item dividers, submenu, or second level header underline. The CSS property for this is
border-color: tomato;
Which Element?
To target a specific group of element in the menu (for example, top level menu items), you need to use the proper selector. The selectors can be found in the UberMenu Customization Assistant. (To target a more specific set or single element, see How to Style One or More Menu Items Differently)
Example 1: Top Level Links Color
For example, to change the color of the top level links to blue, we would grab the proper selector from the customization assistant
/* Top Level Items */
#megaMenu ul.megaMenu > li.menu-item > a,
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {
}
Then set the properties that we want to change, in this case color.
/* Top Level Items */
#megaMenu ul.megaMenu > li.menu-item > a,
#megaMenu ul.megaMenu > li.menu-item > span.um-anchoremulator {
color:blue;
}
Please note that some skins, for example those from skin extension packs, will require a more specific selector to be overridden. For example:
#megaMenu.wpmega-preset-flat-blue ul.megaMenu > li.menu-item > a,
#megaMenu.wpmega-preset-flat-blue ul.megaMenu > li.menu-item > span.um-anchoremulator {
color:blue;
}
Example 2: Submenu Background Color
Again, we get the selector from the Customizer
/* Sub Menu Container Style */
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1{
}
Then use the background property
/* Sub Menu Container Style */
#megaMenu ul.megaMenu > li.menu-item.ss-nav-menu-mega > ul.sub-menu-1{
background:red;
}
Where to add the code?
Now that we have the code written, we just need to apply it to the site. You should never edit the existing skin files. For full details on how to add your custom code, please see Adding Custom CSS.