Note: Okay, this one has a lot of instructions, so strap in!
Customiser settings: Add the Toggle Widget Area block to your header. Click on the settings icon (not the cog, the other one) and make sure to apply the following:
Layout = Side panel
Slide-out side = Left
Popup content max width = 500px works well.
Copy and paste the Javascript in the Custom HTML block below these instructions into Customiser > Custom Scripts > Add scripts into your footer, or a code snippet plugin. Be sure to keep the <script> tags.
If you’ve imported this layout into a page, copy and paste the B&B Expanding Off Canvas Menu 1 section into a new Kadence Element (content type). Leave the Placement empty, and set Show On under the Display Settings section to Entire Site, and save. Grab the shortcode for your new element.
Hop over to Appearance > Widgets. In the Header Off Canvas widget area, add a shortcode block, and paste in the shortcode for your new element.
Your off canvas menu should now display on your site, and you’re ready to edit.
Editing:
While you can add and remove menus, you must maintain the structure for this layout to function. The structure looks like this, the bolded words represent a menu panel:
Main Menu
– Item 1 (Products)
– Item 2 (Resources)
– Item 3 (About us)
– etc.
Submenu for Item 1 (Sub: Products)
– Submenu Item 1 (Premium Bundles)
– Submenu Item 2 (Kadence Theme)
– Submenu Item 3 (Kadence Blocks)
– etc.
Sub Submenu for Submenu Item 1 (Sub Sub: Premium Bundles)
– Sub Submenu for Submenu Item 1 (Section)
– Sub Submenu for Submenu Item 1 (Section)
– Sub Submenu for Submenu Item 1 (Section)
– etc.
Sub Submenu for Submenu Item 2 (Sub Sub: Kadence Theme)
– Sub Submenu for Submenu Item 2 (Header Builder)
– Sub Submenu for Submenu Item 2 (Footer Builder)
– Sub Submenu for Submenu Item 2 (Custom Layouts)
– etc.
Sub Submenu for Submenu Item 3 (Sub Sub: Kadence Blocks)
– Sub Submenu for Submenu Item 2 (Row/layout)
– Sub Submenu for Submenu Item 2 (Tabs)
– Sub Submenu for Submenu Item 2 (Info Box)
– etc.
Etc.
Submenu for Item 2 (Sub: Resources)
– Submenu Item 1 (Blog)
– Submenu Item 2 (Starter Templates)
– Submenu Item 3 (Podcast)
– etc.
Submenu for Item 3 (Sub: About Us)
– Submenu Item 1 (About Kadence)
– Submenu Item 2 (Become an Affiliate)
– Submenu Item 3 (Contact Us)
– etc.
Etc.
You can add Sub Sub menus to Resources, About Us etc. to get a third panel like the Products menu item, just maintain the same structure you see in Products.
Top level:
Within the B&B Expanding Off Canvas Menu 1 parent section is a section called Main Menu. This is your top level menu and must be kept as the first item. Inside it, you can add any blocks you like as menu items. Each menu item in the top level must have a class of bb-exp-menu-1-main-trigger. In the link settings for each top level menu item, you need an anchor that points to the ID of its corresponding submenu. For instance, in the provided content, the Products menu item has a submenu (Sub: Products) with the ID products, so the link for the Products menu item should be #products.
Sub Level:
Each sub level menu container must have the class bb-exp-menu-1-sub. The individual items inside the sub level menu must have the class bb-exp-menu-1-sub-trigger (if they are to open a third level). If the item needs to open a third level, you need an anchor that points to the ID of its corresponding sub-submenu. For instance, in the provided content, the Sub: Products menu has a menu item Premium Bundles which opens the Sub Sub: Premium Bundles menu with the ID premium-bundles, so the link for the Premium Bundles menu item should be #premium-bundles.
Sub Sub Level:
Each sub sub level menu container must have the class bb-exp-menu-1-sub-sub, and an ID so it can be opened by a menu item in its corresponding Sub level menu.
Mobile Version:
In each Sub and Sub Sub menu container, you will see a Back link at the top. Back links are hidden in the desktop version using CSS. Back links must have a class of bb-exp-menu-1-back-trigger.
CSS:
The CSS is contained in the Custom CSS box of the B&B Expanding Off Canvas Menu 1 section. At the top you will see these variables:
:root {
–bb-exp-menu-1-level-1: 500px;
–bb-exp-menu-1-level-2: 400px;
–bb-exp-menu-1-level-3: 400px;
–bb-exp-menu-1-active-color: var(–global-palette1);
}
–bb-exp-menu-1-level-1 sets the width of the Main Menu menu container and must be the same value you entered for the Popup content max width in the customiser.
–bb-exp-menu-1-level-2 sets the width for the sub level menu containers. This can be any width you like, but it applies to all sub level menus.
–bb-exp-menu-1-level-3 sets the width for the sub sub level menu containers. This can be any width you like, but it applies to all sub sub level menus.
–bb-exp-menu-1-active-color: var(–global-palette1) defines the colour of the Main menu items when their corresponding sub level menus are open, and the colour of the sub level items when their corresponding sub sub menus are open. You can change to another colour within your palette by changing the 1 (1-9), or remove that variable if you do not want colours to change.
Mobile Breakpoint:
Towards the bottom of the CSS you will see two media queries that start like this:
@media all and (min-width: 1301px)
@media all and (max-width: 1300px)
The queries define when your menu switches to the mobile version. The breakpoint should be the sum total of the widths of your 3 menu levels defined in the variables above. 500 + 400 + 400 = 1300.
If you change the widths, you need to change the two breakpoints so the mobile version is triggered at the appropriate time. Example:
–bb-exp-menu-1-level-1: 400px;
–bb-exp-menu-1-level-2: 300px;
–bb-exp-menu-1-level-3: 200px;
400 + 300 + 200 = 900.
So your media queries would be:
@media all and (min-width: 901px)
@media all and (max-width: 900px)
Phew! I think that’s it. Enjoy 🙂
