Custom Stylesheet (custom.css)

Knowledgebase Docs » UberMenu 3
UberMenu 3

If you want to add a significant amount of custom CSS, the best method is to use a custom stylesheet.

You can always add the CSS to your child theme’s style.css, but if you want to keep your UberMenu styles separate, you can use the UberMenu custom.css

1. Activate the custom stylesheet

In the UberMenu Control Panel, go to General Settings > Assets and activate the Load Custom Stylesheet settings.

This will load the custom/custom.css file after the UberMenu core and skin files, but before the Custom Tweaks from the settings.

2.Create the custom stylesheet

In the plugins/ubermenu/custom directory, create a custom.css file (you can rename custom-sample.css).

3. Adding supplementary styles

If you would like to add additional styles to customize an existing skin, just start adding your custom CSS to the file.

4. Creating a complete custom skin

If you want to create a completely customized skin, you will likely want to disable the existing skin in the UberMenu Control Panel Main UberMenu Configuration > Basic Configuration by setting the Skin to None (Disable)

If you would like a sample skin to begin working with, copy the custom-sample-skin.css file into your custom.css.

You can also check out this online version of the UberMenu custom-sample-skin.css, which includes comments labelling each style for easy reference.

Have fun customizing!