In this tutorial you will learn how to customize the CSS of your Mega Menu.

All of the CSS used by the Mega Menu is found in the following file:


You can customize this file directly to change color schemes, spacing and more.

Customization Examples

In this section we will look at how to make customizations to the style of the Mega Menu using the above CSS file.

Color Scheme

All colors are defined using CSS variables at the top of the CSS file. You can easily edit the values of each to customize the table color scheme.

For example let's take a look at the dropdown:

/* Dropdown Container */

--navmain-dropdown-background: #f5f5f5;
--navmain-dropdown-background-gradient-top: #f5f5f5;
--navmain-dropdown-background-gradient-bottom: #f5f5f5;
--navmain-dropdown-background-border: #000;
--navmain-dropdown-background-divider: #dbdada;
--navmain-dropdown-foreground: #696969;
--navmain-dropdown-foreground-shadow: #fff;
Dropdown color scheme
Dropdown color scheme

This CSS allows you change the color of every element such as the background, border, foreground etc. Let's say for example you wanted to change to a dark grey color scheme, all you need to do is edit the above block changing the hex codes. For example:

/* Dropdown Container */

--navmain-dropdown-background: #3f3e3e;
--navmain-dropdown-background-gradient-top: #3f3e3e;
--navmain-dropdown-background-gradient-bottom: #5f5f5f;
--navmain-dropdown-background-border: #3c3c3c;
--navmain-dropdown-background-divider: #3c3c3c;
--navmain-dropdown-foreground: #f1f1f1;
--navmain-dropdown-foreground-shadow: #3c3c3c;
Dropdown color scheme changed
Dropdown color scheme changed

Border Radius

The border radius is set with a single variable:

--navmain-border-radius: 5px;

You could set this to 0px to remove the curvature of all elements.


If you have any questions please leave a comment below or contact our support.