Search for: Log In Free Support [Resolved] Create a 3 column layout in Off Canvas Menu Home › Forums › Support › Create a 3 column layout in Off Canvas Menu This topic has 7 replies, 2 voices, and was last updated 6 months, 3 weeks ago by David. Viewing 8 posts - 1 through 8 (of 8 total) Author Posts July 2, 2020 at 9:33 pm #1350121 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 July 3, 2020 at 5:16 am #1350424 DavidStaff Customer Support 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/ July 3, 2020 at 6:53 am #1350515 Desmond Hi David, Added the 2 as Nav Menu Widget, and left the remaining in the menu. Thank you so much for your help! July 3, 2020 at 8:33 am #1350754 DavidStaff Customer Support 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/ July 9, 2020 at 2:24 am #1357559 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 July 9, 2020 at 3:50 am #1357665 DavidStaff Customer Support Try this CSS: .slideout-widget { margin-top: 5px; } Documentation: http://docs.generatepress.com/ Adding CSS: http://docs.generatepress.com/article/adding-css/ July 9, 2020 at 8:10 pm #1358589 Desmond Amazing, thank you! July 10, 2020 at 2:23 am #1358775 DavidStaff Customer Support You’re welcome Documentation: http://docs.generatepress.com/ Adding CSS: http://docs.generatepress.com/article/adding-css/ Author Posts Viewing 8 posts - 1 through 8 (of 8 total) You must be logged in to reply to this topic. Log In Username: Password: Keep me signed in Log In