I activate the plugin and I get a warning about not having anything to work with. What gives?
This is likely because your site is using a custom menu in a widget area for your main navigation. The plugin scans the theme’s registered menu locations and uses whatever menus are assigned there–if you don’t have one assigned, then there is nothing for the plugin to grab on to.
There are two ways to work with this kind of setup: 1) SuperSide Me registers a new menu location, which shows only in the side panel. So you can assign any menu to that, and it will work as your mobile menu, either in addition to other registered menus, or alone if you are not using them at all. 2) You can add a custom menu widget to the SuperSide Me widget area.
How can I add a widget to my SuperSide Me navigation panel?
There is a new SuperSide Me widget area under Appearance > Widgets. You can add any widget you like there, but it helps to be reasonable about it, and keep it small.
Can I change the icons used by the plugin?
Yes! As of version 2.4.0, the easiest way to do this is to use SVG icons (on by default for new users, disabled by default for previous users). When SVG icons are enabled, you can change the icons on the Appearance tab of the SuperSide Me settings page.
If you are not using SVG, use this filter to change the glyphs, or icons, used for the _SuperSide_ panel. You might change the icons like this (the plugin uses Font Awesome for icons, so use any of those you like):
add_filter( 'supersideme_default_glyphs', 'prefix_change_superside_glyphs', 10, 2 );
function prefix_change_superside_glyphs( $glyphs ) {
$glyphs['slide-nav-link'] = '\f100';
$glyphs['slide-nav-link-open'] = '\f101';
$glyphs['menu-close'] = '\f00d';
$glyphs['sub-menu-toggle'] = '\f107';
$glyphs['sub-menu-toggle-open'] = '\f106';
return $glyphs;
}Code language: PHP (php)I want to change things about how the menu behaves or is output.
As of version 2.0, it is likely that most of what you want is now available as a settings option. So check there first. If the settings don’t go far enough, though, you have some filters available to modify the output (whatever you add to these filters will override what’s on your settings page:
add_filter( 'supersideme_panel_options', 'prefix_modify_panel_options' );
/**
* Demo function to show how to modify any panel options.
*
* @param $panel_options
* @return mixed
*/
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'; // 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; // change if the menu pushes the site over
$panel_options['link_color'] = '#fff'; // panel link colors
$panel_options['maxwidth'] = '50em'; // screen width at which SuperSide Me starts working
$panel_options['outline'] = 'dashed'; // outline style
$panel_options['panel_width'] = '100%'; // width of the menu panel
$panel_options['side'] = 'left'; // side for the menu
$panel_options['speed'] = 400; // speed at which the menu slides out
return $panel_options;
}Code language: PHP (php)To modify the main menu button options:
add_filter( 'supersideme_button_options', 'prefix_modify_button_options' );
/**
* Demo function to show how to modify main menu button options.
*
* @param $panel_options
* @return mixed
*/
function prefix_modify_button_options( $button ) {
$button['button_color'] = ''; // style the button independently of the menu panel
$button['function'] = 'prepend'; // change the jQuery function used to add the button (use caution)
$button['location'] = '.site-header'; // change the CSS selector used to place the button
$button['position'] = 'absolute'; // CSS position for the button
$button['width'] = 'auto'; // CSS width for the button
return $button;
}Code language: PHP (php)The plugin does come with its own CSS styles, but I’ve tried to keep them low key and easy to override.
My theme has a responsive menu script in it already. How can I make sure that only one script loads?
SuperSide Me has a function which lets you easily check whether the plugin is active and can create a menu. Here’s how a theme might handle this:
function leaven_load_scripts() {
// Google Fonts
wp_enqueue_style( 'google-fonts', '//fonts.googleapis.com/css?family=Oxygen:300,400,700|Lora:400italic,700italic', array(), PARENT_THEME_VERSION );
// Responsive Navigation
wp_enqueue_script( 'leaven-globaljs', get_stylesheet_directory_uri() . '/js/global.js', array( 'jquery' ), false, PARENT_THEME_VERSION );
if ( function_exists( 'supersideme_has_content' ) && supersideme_has_content() ) {
return;
}
wp_enqueue_script( 'leaven-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );
$output = array(
'mainMenu' => __( 'Menu', 'leaven' ),
'subMenu' => __( 'Menu', 'leaven' ),
);
wp_localize_script( 'leaven-responsive-menu', 'LeavenL10n', $output );
}Code language: PHP (php)Basically, set the theme responsive menu as the last script to load, and do an early return if SuperSide Me is running. If it’s not, then the theme menu loads.
Is it possible to deactivate the menu entirely, say, on a landing page template?
Yes, you can just add this to your template file:
// Remove Mobile Menu
add_filter( 'supersideme_disable', '__return_true' );Code language: JavaScript (javascript)What if my theme’s menu still displays? How can I hide it?
Since theme authors can name their menus and site elements anything they want, it’s not possible to account for every single theme in the plugin. As of SuperSide Me 2.0, there are two CSS settings: one for hiding elements, and one for displaying elements which might otherwise be hidden.
Alternatively, there is a filter to hide your specific menus/elements. Here’s how you might hide the navigation toggle button for the WordPress default theme Twenty Fourteen:
add_filter( 'supersideme_hide_elements', 'twentyfourteen_hide_button' );
function twentyfourteen_hide_button( $hidden ) {
$hidden[] = '.menu-toggle'; // append your specific element to an array of general navigation elements
return $hidden;
}Code language: PHP (php)If you want even more control over SuperSide Me’s inline CSS, which hides other navigation elements and displays the main menu button, here’s a filter for you:
add_filter( 'supersideme_modify_display_css', 'altitude_full_width_supersideme', 10, 3 );
function altitude_full_width_supersideme( $display_css, $side_tweaks, $hidden ) {
$display_css =
$hidden . ' { display: none; }
.slide-nav-link { display: block; }';
return $display_css;
}Code language: PHP (php)$side_tweaks are the navigation options passed by the settings page and supersideme_navigation_options filter; $hidden is the pre-existing array of hidden [[navigation]] elements.