Display the sub menu as a trapezoid

Hey Aviatist,

Please try adding this CSS code in Enfold > General Styling > Quick CSS:

#top #header #avia-menu > li > .sub-menu:before {
    border-top: 236px solid #d63e2d;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
    content: '';
    position: absolute;
    left: -50px;
}

#top #header #avia-menu > li > .sub-menu:after {
    border-top: 236px solid #d63e2d;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
    content: '';
    position: absolute;
    right: -50px;
}

#top #header #avia-menu > #menu-item-1047 > .sub-menu:before {
    border-top: 426px solid #d63e2d;
}

#top #header #avia-menu > #menu-item-1047 > .sub-menu:after {
    border-top: 426px solid #d63e2d;
}

You would need to tweak it, but this should help a bit.
You can also check this for further information: https://stackoverflow.com/questions/7920754/how-to-draw-a-trapezium-trapezoid-with-css3

Best regards,
Nikko

Hi Florian,

We’re happy that we could help :)
Let us know if you need further assistance or if we can close this thread.

Best regards,
Nikko