Frequently Asked Questions

(from the readme)

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! The plugin has many filters available, including one 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):

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';
view raw readme.txt hosted with ❤ by GitHub

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' );
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;
view raw readme.txt hosted with ❤ by GitHub

To modify the main menu button options:

add_filter( 'supersideme_button_options', 'prefix_modify_button_options' );
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;
view raw readme.txt hosted with ❤ by GitHub

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 I use it in my starter theme:

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;
}
// FontAwesome
wp_enqueue_style( 'fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7/css/font-awesome.min.css', array(), '4.7' );
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 );
view raw readme.txt hosted with ❤ by GitHub

Basically, my theme’s responsive menu is the last script I load up, and I do an early return if my plugin 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
view raw readme.txt hosted with ❤ by GitHub

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;
view raw readme.txt hosted with ❤ by GitHub

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;
view raw readme.txt hosted with ❤ by GitHub

$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.

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