Create a 3 column layout in Off Canvas Menu

Hi there,

it would take a little custom development.
You would need to split your content.

Try adding the About Us and the What Is using 2 x Navigation Widgets in the Off Canvas Widget area.

Leave the remaining menu items in the Off Cavnas menu.

Once thats done ill take a look at the CSS to re-order and position.

Hi David,

Added the 2 as Nav Menu Widget, and left the remaining in the menu.

Thank you so much for your help!

Add this CSS:

@media (min-width: 769px) {
    .slideout-navigation.do-overlay .inside-navigation {
        flex-direction: row-reverse;
        max-width: 1000px;
        padding: 100px 40px !important;
    }
    #generate-slideout-menu.do-overlay .slideout-menu li  {
        text-align: left;
    }
    #generate-slideout-menu.do-overlay .slideout-menu li a {
        text-transform: uppercase;
        font-weight: 900;
    }
}

Then switch the order of you two widgets, and use the Widget Title field to add the About us and What Is titles. Then its just case of adding your menus to them.

Thank you David, I managed to achieve it.

A little more tweaking, how to make the top part to be aligned?

Screenshot here: https://optimization-my.d.pr/uM151A

Try this CSS:

.slideout-widget {
    margin-top: 5px;
}

Amazing, thank you!

You're welcome