Hi,

As a developer, I'm looking to build custom off-canvas menu types for my websites. However, I can't find the relevant files to add this option into the backend menu (see attached). It would be really helpful if you could point me in the right direction and provide any other information I might need to build this custom menu.

Kind regards,

To apply additional context, I have discovered files related to what I'm trying to achieve, but have not quite reached a solution as of yet.

Under the "themes/salient/nectar/redux-framework" filepath, the "options-config.php" file contains a series of sections it adds relating to the options for off-canvas menus. The code is the following:

$opt_name = "salient_redux";
$opt_name = apply_filters( 'redux_demo/opt_name', $opt_name );
$theme    = wp_get_theme();
// skip to line 3131
Redux::setSection($opt_name, array(
  'title' => esc_html__('Off Canvas Menu', 'salient'),
  'id' => 'header-nav-off-canvas-navigation',
  'subsection' => true,
  'fields' => array(
    array(
      'id' => 'header-slide-out-widget-area',
      'type' => 'switch',
      'title' => esc_html__('Off Canvas Menu', 'salient'),
      'subtitle' => esc_html__('This will add an off canvas menu button on all viewports to your header navigation. When this is disabled, the off canvas menu will only be visible on mobile devices.', 'salient'),
      'desc' => '',
      'required' => array(array('header-slide-out-widget-area-style', '!=', 'simple')),
      'default' => '1'
    ),
    array(
      'id' => 'header-slide-out-widget-area-style',
      'type' => 'select',
      'title' => esc_html__('Off Canvas Menu Style', 'salient'),
      'subtitle' => esc_html__('Please select your off canvas menu style here. The "Slide Out From Right Hover Triggered" style will force the "Full Width Header" option regardless of your selection.', 'salient'),
      'desc' => '',
      'options' => array(
        'slide-out-from-right' => esc_html__('Slide Out From Side', 'salient'),
        'slide-out-from-right-hover' => esc_html__('Slide Out From Side Hover Triggered', 'salient'),
        'fullscreen' => esc_html__('Fullscreen Cover Slide + Blur BG', 'salient'),
        'fullscreen-alt' => esc_html__('Fullscreen Cover Fade', 'salient'),
        'fullscreen-inline-images' => esc_html__('Fullscreen Inline with Dynamic BG', 'salient'),
        'fullscreen-split' => esc_html__('Fullscreen Cover Split', 'salient'),
        'simple' => esc_html__('Simple Dropdown', 'salient')
      ),
      'default' => 'slide-out-from-right',
    ),
    array(
      'id' => 'header-slide-out-widget-area-separate-mobile',
      'type' => 'switch',
      'title' => esc_html__('Off Canvas Menu Separate Mobile Menu', 'salient'),
      'subtitle' => esc_html__('This will cause your off canvas to only display navigation menu items assigned to the "Off Canvas Navigation Menu" location when viewing on a mobile device.', 'salient'),
      'desc' => '',
      'required' => array(array('header-slide-out-widget-area', '!=', '1')),
      'default' => '0'
    ),
    array(
      'id' => 'fullscreen-inline-images-default',
      'type' => 'media',
      'required' => array(array('header-slide-out-widget-area-style', '=', 'fullscreen-inline-images')),
      'title' => esc_html__('Default Off Canvas Background Image', 'salient'),
      'subtitle' => esc_html__('Choose the default image to be shown in your Off Canvas Menu. You can also supply a unique item for each menu item in', 'salient').
      ' <a href="'.esc_url(admin_url('nav-menus.php')).
      '">'.esc_html__('Appearance > Menus.', 'salient').
      '</a>',
      'desc' => ''
    ),
    array(
      'id' => 'header-slide-out-widget-area-dropdown-behavior',
      'type' => 'select',
      'title' => esc_html__('Off Canvas Menu Dropdown Behavior', 'salient'),
      'subtitle' => esc_html__('Please select the functionality for how dropdowns will behave in your off canvas menu.', 'salient'),
      'desc' => '',
      'options' => array(
        'default' => esc_html__('Dropdown Parent Link Toggles Submenu', 'salient'),
        'separate-dropdown-parent-link' => esc_html__('Separate Dropdown Parent Link From Dropdown Toggle', 'salient')
      ),
      'default' => 'separate-dropdown-parent-link',
      'required' => array(array('header-slide-out-widget-area-style', '!=', 'fullscreen'), array('header-slide-out-widget-area-style', '!=', 'fullscreen-inline-images'), array('header-slide-out-widget-area-style', '!=', 'fullscreen-alt'), array('header-slide-out-widget-area-style', '!=', 'simple')),
    ),
    array(
      'id' => 'header-slide-out-from-right-simplify-mobile',
      'type' => 'switch',
      'title' => esc_html__('Simplify Animation/Style of OCM on Mobile', 'salient'),
      'subtitle' => esc_html__('The "Slide Out From Side" animation can be difficult for some mobile devices to render correctly. You can use this to offer a simplified version when accessed from a mobile device.', 'salient'),
      'desc' => '',
      'required' => array(array('header-slide-out-widget-area-style', '=', 'slide-out-from-right'), array('theme-skin', '=', 'material')),
      'default' => '0'
    ),
    array(
      'id' => 'header-menu-label',
      'type' => 'switch',
      'title' => esc_html__('Off Canvas Menu Add Menu Label', 'salient'),
      'subtitle' => esc_html__('This will add a "Menu" label next to your off canvas link.', 'salient'),
      'desc' => '',
      'default' => '0'
    ),
    array(
      'id' => 'ocm_btn_position',
      'type' => 'select',
      'title' => esc_html__('Off Canvas Menu Button Position', 'salient'),
      'subtitle' => esc_html__('Please select the positioning for your off canvas menu.', 'salient'),
      'desc' => '',
      'required' => array(array('header_format', '!=', 'centered-logo-between-menu'), array('header_format', '!=', 'centered-menu-under-logo'), array('header-slide-out-widget-area-style', '!=', 'simple')),
      'options' => array(
        'default' => esc_html__('Default', 'salient'),
        'left' => esc_html__('Left', 'salient'),
      ),
      'default' => 'default',
    ),
    array(
      'id' => 'header-slide-out-widget-area-social',
      'type' => 'switch',
      'title' => esc_html__('Off Canvas Menu Add Social', 'salient'),
      'subtitle' => esc_html__('This will add the social links you have links set for in the "Social Media" tab to your off canvas menu.', 'salient'),
      'desc' => '',
      'default' => '0'
    ),
    array(
      'id' => 'header-slide-out-widget-area-bottom-text',
      'type' => 'text',
      'title' => esc_html__('Off Canvas Menu Bottom Text', 'salient'),
      'subtitle' => esc_html__('This will add some text fixed at the bottom of your off canvas menu - useful for copyright or quick contact info etc.', 'salient'),
      'desc' => '',
      'default' => ''
    ),
    array(
      'id' => 'header-slide-out-widget-area-overlay-opacity',
      'type' => 'select',
      'title' => esc_html__('Off Canvas Menu Overlay Strength', 'salient'),
      'subtitle' => esc_html__('Please select your off canvas menu overlay strength here.', 'salient'),
      'desc' => '',
      'options' => array(
        'solid' => esc_html__('Solid', 'salient'),
        'dark' => esc_html__('Dark', 'salient'),
        'medium' => esc_html__('Medium', 'salient'),
        'light' => esc_html__('Light', 'salient')
      ),
      'default' => 'dark',
      'required' => array(array('header-slide-out-widget-area-style', '!=', 'simple'))
    ),
    array(
      'id' => 'header-slide-out-widget-area-top-nav-in-mobile',
      'type' => 'switch',
      'title' => esc_html__('Off Canvas Menu Mobile Nav Menu items', 'salient'),
      'subtitle' => esc_html__('This will cause your off canvas menu to inherit any navigation items assigned in your "Top Navigation" menu location when viewing on a mobile device.', 'salient').
      '<br><br>'.esc_html__('Enabled by default in the Material theme skin.', 'salient'),
      'desc' => '',
      'required' => array(array('header-slide-out-widget-area-style', '!=', 'simple'), array('header-slide-out-widget-area', '!=', '0')),
      'default' => '0'
    ),
    array(
      'id' => 'header-slide-out-widget-area-icons-display',
      'type' => 'select',
      'title' => esc_html__('Off Canvas Menu Item Icons', 'salient'),
      'subtitle' => esc_html__('This will control what type of icons (if any) to display in your off canvas menu. Icons are defined by you on an individual menu item basis in Appearance > Menus.', 'salient'),
      'desc' => '',
      'options' => array(
        'none' => esc_html__('Display No Icons', 'salient'),
        'font_icons_only' => esc_html__('Display Font/Emoji Icons Only', 'salient'),
        'image_icons_only' => esc_html__('Display Image Icons Only', 'salient'),
        'all' => esc_html__('Display All Icons', 'salient'),
      ),
      'default' => 'none'
    ),
    array(
      'id' => 'header-slide-out-widget-area-image-display',
      'type' => 'select',
      'title' => esc_html__('Off Canvas Menu Item Images', 'salient'),
      'subtitle' => esc_html__('This will control how to display menu items which have an image set. Removing images will simply your menu items to their default mobile state. Menu Item images are defined by you on an individual menu item basis in Appearance > Menus.', 'salient'),
      'desc' => '',
      'options' => array(
        'remove_images' => esc_html__('Remove Images', 'salient'),
        'default' => esc_html__('Display Images', 'salient'),
      ),
      'default' => 'remove_images'
    ),
    array(
      'id' => 'header-slide-out-widget-area-icon-style',
      'type' => 'select',
      'title' => esc_html__('Off Canvas Icon Style', 'salient'),
      'subtitle' => esc_html__('Please select your off canvas header icon style.', 'salient'),
      'desc' => '',
      'options' => array(
        'default' => esc_html__('Default', 'salient'),
        'circular' => esc_html__('Circular', 'salient')
      ),
      'default' => 'default',
      'required' => array(array('header-menu-label', '!=', '1'))
    ),
    array(
      'id' => 'header-slide-out-widget-area-menu-btn-bg-color',
      'type' => 'color',
      'title' => esc_html__('Off Canvas Navigation Menu Button BG Color', 'salient'),
      'desc' => '',
      'transparent' => false,
      'subtitle' => esc_html__('Optionally define a background color for your off canvas navigation button within the header. Useful in combination with the "Permanent Transparent" navigation option.', 'salient'),
      'default' => ''
    ),
    array(
      'id' => 'header-slide-out-widget-area-menu-btn-color',
      'type' => 'color',
      'title' => esc_html__('Off Canvas Navigation Menu Button Color', 'salient'),
      'desc' => '',
      'transparent' => false,
      'default' => ''
    ),
    array(
      'id' => 'header-slide-out-widget-area-custom-font-size',
      'type' => 'text',
      'title' => esc_html__('Off Canvas Menu Custom Font Size (Desktop)', 'salient'),
      'subtitle' => esc_html__('Optionally specify a custom font size to use for your off canvas navigation menu items when viewed on desktop displays. All unit types are accepted.', 'salient'),
      'desc' => '',
      'default' => ''
    ),
    array(
      'id' => 'header-slide-out-widget-area-custom-font-size-mobile',
      'type' => 'text',
      'title' => esc_html__('Off Canvas Menu Custom Font Size (Mobile)', 'salient'),
      'subtitle' => esc_html__('Optionally specify a custom font size to use for your off canvas navigation menu items when viewed on mobile displays. All unit types are accepted.', 'salient'),
      'desc' => '',
      'default' => ''
    ),
  )
));

I've attempted then to replicate this code, adding my new option under line 3160 as the following:

'custom' => esc_html__('Custom Off Canvas', 'salient')

I've attempted to apply these new changes in an action that attaches to the admin_head action, which seeks to replace the Off Canvas Menu section with our new Off Canvas Menu section with the new option for the widget style.

However, it still seems that these changes aren't applying to the theme option page itself, which suggests that there's another file involved, but I'm unable to locate it. Any pointers in the right direction would be greatly appreciated.

Kind regards,