Archived topic

Export off-canvas panel

5 replies · Started by Jason on July 30, 2022

Viewing posts 1–6 of 6

July 30, 2022 at 6:57 am #2298043

Hi, I would like to export the off-canvas panel, is that possible? Like exporting a menu.

If not, is there a way to convert a Nav Menu in off-canvas panel to HTML code so that I can copy/paste it into a new site? The reason I want to do this is because I have other HTML code that I copy into the shortcode field of the off-canvas panel when setting up a new site. I can't see a way of copying Nav Menu code though.

Thanks

July 30, 2022 at 8:21 am #2298285

Hi there,

is it possible to see the site with the Off Canvas Panel that you want to copy ?
As its not possible to copy the panel itself but there may be another of managing the custom HTML that needs copying.

August 1, 2022 at 8:28 am #2299942

Hi David, I put the link in the box below. No worries if there's not a suitable solution, I can make due by manually adding the components (short-codes, nav menu, and mailchimp). Thanks

August 1, 2022 at 5:41 pm #2300255

Hi Jason,

You can do such a layout for your off canvas panel in GP. First, activate the off canvas panel in Appearance > Customize > Layout > Off Canvas Panel.

Then, you can add Blocks/Shortcodes to the GP off canvas panel through hook inside_slideout_navigation.

You can set the menu for the off canvas panel in Appearance > Menus or Customize > Menus.

Lastly, you’ll need custom CSS to move the toggle button and the slideout panel.

Here’s something you may try:

span.menu-bar-item.slideout-toggle {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

nav#generate-slideout-menu.is-open {
    transform: translateX(500px);
}

August 1, 2022 at 5:51 pm #2300258

Will do, thanks!

August 1, 2022 at 7:00 pm #2300292

You’re welcome Jason!

This archived topic is closed to new replies.

Start building better websites today.