Envy Mega Menu – Plugin Documentation

If you want to make your menu looks like the above then go to Envy Mega Menu->Settings and paste following CSS into Custom CSS Code field:

#envy-mega-menu-container .etm-navbar-nav>.etm-nav-item>a {
    font-size: 16px !important;
    font-family: var(--headerFont);
    line-height: 24px;
    font-weight: 500;
    padding: 29px 52px !important;
}
#envy-mega-menu-container .etm-navbar-nav>.etm-nav-item a {
    font-size: 16px !important;
    font-family: var(--headerFont);
    line-height: 24px;
    font-weight: 500;
}
#envy-mega-menu-container .etm-navbar-nav>.etm-nav-item {
    border-right: 1px solid #E5E5E5;
    text-align: center;
    margin-right: 0;
}

#envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-toggle::before {
    right: 40px;
    top: 37px;
}

#envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-toggle::after {
    right: 45px;
    top: 37px;
}

#envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-menu .etm-nav-item .etm-nav-link {
    text-align: left;
    border-bottom: 1px dashed #ededed;
}

#envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-menu {
    padding: 0 !important;
}

@media only screen and (min-width: 992px) and (max-width: 1199px){
    #envy-mega-menu-container .etm-navbar-nav>.etm-nav-item>a {
        padding: 26px 14px !important;
    }
    #envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-toggle::before {
        right: 2px;
    }
    #envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-toggle::after {
        right: 7px;
    }
    #envy-mega-menu-container .etm-navbar-nav>.etm-nav-item {
        border-right: 0;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    #envy-mega-menu-container .etm-navbar-nav>.etm-nav-item>a {
        padding: 27px 24px !important;
    }
    #envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-toggle::before {
        right: 2px;
    }
    #envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-toggle::after {
        right: 7px;
    }
    #envy-mega-menu-container .etm-navbar-nav>.etm-nav-item {
        border-right: 0;
    }
}

@media only screen and (min-width: 1400px) and (max-width: 1599px) {
    #envy-mega-menu-container .etm-navbar-nav>.etm-nav-item>a {
        padding: 30px 23px !important;
    }
    #envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-toggle::before {
        right: 10px;
        top: 42px;
    }
    #envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-toggle::after {
        right: 15px;
        top: 42px;
    }
}

@media only screen and (min-width: 1600px) {
    #envy-mega-menu-container .etm-navbar-nav>.etm-nav-item>a {
        padding: 30px 51px !important;
    }
    #envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-toggle::before {
        right: 35px;
        top: 40px;
    }
    #envy-mega-menu-container .etm-navbar-nav .etm-nav-item .etm-dropdown-toggle::after {
        right: 40px;
        top: 40px;
    }
}

.emm-mega-menu-enabled .etm-dropdown-menu .etm-nav-item .etm-nav-link {
    float: left;
}