Add the Simple Mega Menu

OliveWP theme allows to you add the mega menu with the help of CSS, It works only with the OliveWP theme. Follow the below steps to add the Mega Menu.

Step 1: Go to Appearance >> Customize >>Additional CSS and add the below given custom CSS code.

@media (min-width: 1100px) {
    .olivewp-mega-menu {
        background: none;
        opacity: 1;
        overflow: visible;
        position: static;
    }
    .olivewp-mega-menu ul.dropdown-menu {
        opacity: 1;
        overflow: visible;
        position: absolute;
        width: 100%;
        max-width: none;
        left: 0;
    }
    .olivewp-mega-menu ul.dropdown-menu li {
        font-family: inherit;
        display: block;
        float: left;
        clear: none;
        vertical-align: top;
        width: 33.33%;
        overflow: hidden;
        margin-bottom:5px;
    }
    .olivewp-mega-menu ul.dropdown-menu li.dropdown li, 
    .olivewp-mega-menu.olivewp-mega-1-col  ul.dropdown-menu li {
        width: 100%;
    }
    .olivewp-mega-menu.olivewp-mega-2-col ul.dropdown-menu  li {
        width: 50%;
    }
    .olivewp-mega-menu.olivewp-mega-3-col ul.dropdown-menu li {
        width: 33.33%;
    }
    .olivewp-mega-menu.olivewp-mega-4-col ul.dropdown-menu  li {
        width: 25%;
    }
    .olivewp-mega-menu.olivewp-mega-2-col  ul.dropdown-menu li:nth-child(2n+1),
    .olivewp-mega-menu.olivewp-mega-3-col  ul.dropdown-menu li:nth-child(3n+1),
    .olivewp-mega-menu.olivewp-mega-4-col  ul.dropdown-menu li:nth-child(4n+1), 
    .olivewp-mega-menu.olivewp-mega-3-col  ul.dropdown-menu li:nth-child(3n+1) { 
        clear:both; 
    }
    .olivewp-mega-menu.olivewp-mega-2-col  ul.dropdown-menu li:nth-child(3n+1),
    .olivewp-mega-menu.olivewp-mega-4-col  ul.dropdown-menu li:nth-child(3n+1) {
        clear:unset;
    }
    .spice-custom .olivewp-mega-menu.open  .dropdown-menu {
        visibility: visible;
        opacity: 1;
    }
    .spice-custom .olivewp-mega-menu ul.dropdown-menu li.dropdown .dropdown-menu {
        position: relative;border: 0;
        right: 100%;
        left: 10px;
    }
    .spice-nav .olivewp-mega-menu ul.dropdown-menu  .fa-angle-down:before {
        content: unset;
    }
    .spice-nav .olivewp-mega-menu{
         position: unset;
     }
    .spice-custom ul { 
        position: relative; 
    }
    .spice-custom .olivewp-mega-menu ul.dropdown-menu li.dropdown .dropdown-menu li.dropdown {
        padding: 0;
        vertical-align: top;
        width: 100%;
    }
    .spice-custom .olivewp-mega-menu .dropdown-menu { 
        box-shadow: unset;
    }
    .spice-custom .olivewp-mega-menu .olivewp-mega-heading > a { 
        font-weight: 900;
    }
    .spice-custom .spice-nav .olivewp-mega-menu .open > a {
        color: #FFFFFF;
    }
    .layout1.spice-custom .spice-nav .olivewp-mega-menu li > a, 
    .layout2.spice-custom .spice-nav .olivewp-mega-menu li > a, 
    .layout1.spice-custom .spice-nav .olivewp-mega-menu .open > a:focus, 
    .layout1.spice-custom .spice-nav .olivewp-mega-menu .open > a:hover, 
    .layout1.spice-custom .spice-nav .olivewp-mega-menu .open > a, 
    .layout2.spice-custom .spice-nav .olivewp-mega-menu .open > a:focus, 
    .layout2.spice-custom .spice-nav .olivewp-mega-menu .open > a:hover, 
    .layout2.spice-custom .spice-nav .olivewp-mega-menu .open > a {
        color: #000000;
    }
    .spice-custom .olivewp-mega-menu .dropdown-menu {
        min-width: auto;
    }
}

Step 2: Go to Appearance >> Menu and create a new menu or use the existing menu.

Step 3: Need to create the menu structure such as the parent item, child item, and grandchild item.

Parent item: The item that displays on the main navigation bar.
Child item: The item that displays below the parent item as a series and those are shown as the heading/main menu of the mega menu.
Grandchild item: The item that displays below the child item.

Step 4: Now, the menu structure is created then open the parent item and add the olivewp-mega-menu class.

If you don’t see the CSS Classes input field, see the below screenshot.

Step 5: Now, we save the change then the results show look as below screenshot.

If you want to show a child item as a heading of the mega menu, need to add the olivewp-mega-heading class to the child item.

We have shown the mega menu by default in 3 columns. If you want to change the column layout of the mega menu, need to add another class to the parent item. Below shown the column classes:

olivewp-mega-1-col
olivewp-mega-2-col
olivewp-mega-3-col
olivewp-mega-4-col

For example, If you want two columns, the class would look like this: