Archived topic
Off canvas menu panel like 'sider' in site library
5 replies · Started by Sunil on July 12, 2021
Hello,
So I saw the slideOut template in site library, and I want to implement similar off-canvas panel. Basically, there will be nomal navigation with logo on left, and there will be a hamburger menu in right, toggling on which will open a off-canvas panel, which will have some additional menu links, social icons, and newsletter form. And in mobile and tablet views, the off-canvas panel should also include the main navigation links, and outside it will be only logo and hamburger menu. Bit confusing, but hope I explained it. How can I achieve this.
Hi there,
you can simply enable the Off Canvas Panel on Desktop:
https://docs.generatepress.com/article/off-canvas-panel-overview/
Hello,
Thanks for the quick reply!! Also sorry for my late reply.So yeah, I tried the off canvas panel. And this panel I kept in desktop only mode. So I have two menus, on desktop it works fine. I have navigation in header with few links, and there is hamburger which contains my off canvas menu. Now in mobile, I only get off-canvas menu, which is correct but I want my primary menu included inside off-canvas along with off-canvas menu. Also in tablet, I want same, I want only off-canvas hamburger, which will include primary menu inside it. I am trying to achieve something like that.
Simplest way is to include all links in the off canvas panel menu.
Then hide the ones you don't require on Desktop by adding a CSS class of hide-on-desktop for each of the duplicated desktop links.
This article explains how to add the CSS Class to a menu item:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
Aye aye cap, that works like a charm!! Also sorry for late reply. I have some minor issues now, I wil start a new topic for them soon, thanks a lot :)
Glad to be of help!
