Custom mega menu

Hi there,

in the CSS look for this:

nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
    width: 50%;
}

and replace it with:

nav .main-nav .mega-menu.mega-menu-col-2 > ul > li:first-child {
    width: 66%;
}

nav .main-nav .mega-menu.mega-menu-col-2 > ul > li:last-child {
    width: 33%;
}

Awesome. Thank you, David :)

How could I add a space between 2 columns and a top border like demo?

Inside the @media query you can try adding:

/* Add top border to mega menu */
nav .main-nav .mega-menu>ul {
    border-top: 4px solid #00f;
}

/* move spacing around sub-sub-menus */
nav .main-nav .mega-menu>ul>li a {
    padding-left: 0;
}

nav .main-nav .mega-menu>ul>li {
    padding: 10px;
}

/* Set the font size of the top level items */
nav .main-nav .mega-menu>ul>li>a {
    font-size: 16px;
}

/* Add caret bullet before sub-sub items */
nav .main-nav .mega-menu>ul>li>ul>li a:before {
    content: '\27A4';
    margin-right: 5px;
    font-size: 0.75em;
}

Thank you for your help, David :)

I did it.

Glad to hear that!