Spezielles Kantenlayout – spezielles Layout an den Kanten

Hey babettegcc,

Thank you for the inquiry.

We can use the clip-path css property to adjust the shape of the submenu container.

.av-main-nav > li > ul {
    clip-path: polygon(0% 0%, 100% 0, 100% 80%, 75% 100%, 0% 100%);
}

Please check this tool.

// https://bennettfeely.com/clippy/

Best regards,
Ismael

Hi,

Thank you for the update.

You can also apply the same css to the column element. Just apply a custom css class name to it, duplicate the css code that we used above and replace the selector with the custom css class name.

// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

If the custom css class name of the column is av-clipped-column for example, the css code should look like this.

.responsive #top .av-clipped-column {
    clip-path: polygon(0% 0%, 100% 0, 100% 80%, 75% 100%, 0% 100%);
}

You can then apply a custom background color to the column itself instead of a background image.

Best regards,
Ismael

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike