Create a 3 column layout in Off Canvas Menu

[Desmond]

I am hoping to create an off-canvas menu with 3 columns (currently only support 1 I think), how can I add more columns?

Target: https://optimization-my.d.pr/6YgkDr

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Desmond]

Hi David,

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

Thank you so much for your help!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Desmond]

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

[David]

Try this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Desmond]

Amazing, thank you!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts