How to Modify SuperSide Me Navigation Options

The settings page for SuperSide Me is intentionally fairly limited, but that doesn’t mean that your navigation options are limited. There are handy filters which allows you to change a lot of things about the placement and design of the panel. As of SuperSide Me 2.0, the filter is split into two smaller filters (as of 2.0, many options which were limited to filters are now available as settings!).

To modify your main menu button:

add_filter( 'supersideme_button_options', 'prefix_modify_button_options' );
function prefix_modify_button_options( $button ) {
$button['button_color'] = '';
$button['location'] = '.site-header';
$button['position'] = 'absolute';
$button['width'] = 'auto';
return $button;
}

To modify the menu panel itself:

add_filter( 'supersideme_panel_options', 'prefix_modify_panel_options' );
function prefix_modify_panel_options( $panel_options ) {
$panel_options['background'] = '#000';
$panel_options['close'] = ''; // removes the close button from the SuperSide panel
$panel_options['closeevent'] = '.menu-close, .menu-item a'; // change what causes the SuperSide Me panel to close (useful mostly if you have on page anchor links in your menu)
$panel_options['displace'] = false;
$panel_options['link_color'] = '#fff';
$panel_options['maxwidth'] = '50em';
$panel_options['outline'] = 'dashed';
$panel_options['panel_width'] = '100%';
$panel_options['side'] = 'left';
$panel_options['speed'] = 400;
return $panel_options;
}

If you’re still on SuperSide Me 1.9 or earlier, those filters are combined into this one instead:

<?php
/**
* Note: although this filter is still available in SuperSide Me 2.0, it's been
* split into two smaller filters. If you're on an older version of SuperSide Me,
* please update, but know that this filter is the one you want and it will
* continue to work.
*/
// you can add this to your theme's functions.php file, but do not include the
// opening tag!
add_filter( 'supersideme_navigation_options', 'prefix_modify_supersideme_options' );
function prefix_modify_supersideme_options( $side_tweaks ) {
$side_tweaks['background'] = '#000000'; // change background color for side and menu button
$side_tweaks['button_color'] = ''; // empty by default (so it will use the panel background color), but there are cases where you might want to style this independently of the main menu panel
$side_tweaks['close'] = ''; // removes the close button from the SuperSide panel
$side_tweaks['closeevent'] = '.menu-close, .menu-item a'; // change what causes the SuperSide Me panel to close (useful mostly if you have on page anchor links in your menu)
$side_tweaks['displace'] = false; // the side panel will slide over the site instead of pushing it
$side_tweaks['link_color'] = '#fefefe'; // change the link color
$side_tweaks['location'] = '.site-header'; // the menu button will hook into the .site-header div instead of being added to the body (default)
$side_tweaks['maxwidth'] = '50em'; // change the width at which the mobile menu activates (default 800px)
$side_tweaks['outline'] = 'dotted'; // for accessibility support, there is an outline added to the side panel on focus. change the outline style
$side_tweaks['panel_width'] = '260px'; // change the width of the side panel
$side_tweaks['position'] = 'absolute'; // absolute position instead of relative
$side_tweaks['side'] = 'right'; // will override what is set on the settings page
$side_tweaks['speed'] = 200; // open/close speed for menu panel (in milliseconds)
$side_tweaks['width'] = 'auto'; // main menu button width
return $side_tweaks;
}
Please note that this filter still exists in 2.0 and works as it always has; I just split it to make it a bit less overwhelming.

You can use as much or as little of the filter as you like, depending on your needs. Some options are useful in fairly limited edge cases. For example, the closeevent option is useful for sites with menu items which link to a section of the page, rather than to a new page.

Return to SuperSide Me
Bars Code Check chevron-down chevron-left chevron-right chevron-up Envelope Laptop Search Times Facebook GitHub Google Plus Instagram LinkedIn Pinterest Twitter WordPress Logo Wordpress Simple