This summer, I released my first premium plugin, SuperSide Me. It’s an app style, or side menu for WordPress, really intended to make websites mobile friendly, regardless of how complex their menu structure might be.
However, I’ve had a few questions about whether it’s possible to use SuperSide Me at all widths, both desktop and mobile, because the panel style menu is pretty fun. The answer is absolutely yes, and, if you’re willing to get your hands a teensy bit dirty, really rather easy.
SuperSide Me includes filters to modify the plugin’s behavior. By default, all menu locations on your site (such as primary, secondary) will be hidden at the width of the site where the menu functionality kicks in–the default is 800px. There is really only one place where this width matters, and that is in the CSS which controls hiding/showing the regular navigation menus, and showing the SuperSide Me menu button.
Step One: Modify the Default CSS
My tutorial is using the Altitude Pro theme from StudioPress (affiliate link), although you could apply this to pretty much any theme you can think of. So we can use the filter, and change the output to be width-agnostic:
You May Also Like:
add_filter( 'supersideme_modify_display_css', 'altitude_full_width_supersideme' );
function altitude_full_width_supersideme( $display_css ) {
$display_css = '
nav, #nav, .nav-primary, .nav-secondary, .site-header .secondary-toggle { display: none; }
.slide-nav-link { display: block; }';
return $display_css;
}Code language: PHP (php)At this point, you could sit back and relax, because your work could be done. Truly.
Step Two: Polish It a Little
However, this is a tutorial, so I’d rather make sure you have access to more options than not. Additionally, because Altitude Pro’s .site-header is fixed (or glued) to the top of the site, if you stopped here, you wouldn’t actually be able to use your navigation menu or button, because it’s hidden behind the theme’s header. So, let’s utilize another filter:
add_filter( 'supersideme_navigation_options', 'altitude_modify_supersideme_options', 10, 2 );
function altitude_modify_supersideme_options( $side_tweaks ) {
$side_tweaks['position'] = 'absolute'; // lock the button postion within its parent element
$side_tweaks['width'] = 'auto'; // instead of 100% width
$side_tweaks['displace'] = false; // the side panel will slide over the site instead of pushing it
$side_tweaks['location'] = '.site-header .wrap'; // the menu button will hook into the .site-header div instead of being added to the body (default)
$side_tweaks['closeevent'] = '.menu-close, a[itemprop="url"]:not(.sub-menu-toggle)'; // change what causes the SuperSide Me panel to close (useful mostly if you have on page anchor links in your menu)
$side_tweaks['button_color'] = 'transparent'; // optional, so it has no color
$side_tweaks['background'] = 'rgba(0,0,0,.8)'; // optional, to give the menu panel some transparency
return $side_tweaks;
}Code language: PHP (php)This is actually a small representation of a filter with a lot of options. We’re using the filter for just a few things:
- position: relative by default–setting it to absolute can make it easier to insert into a specific location, such as the header area.
- width: 100% by default–this ensures the button will be the width of its content
- displace: the menu panel will slide over on top of the site, rather than pushing it out of the way (I do this because Altitude Pro has some elements which won’t naturally move over on their own with the rest of the site–it’s possible to make it happen, but more than I care to go into here)
- location: by default, the menu button is added to the beginning of the
<body>… because every site has this, regardless of theme. I’m moving the button to the.site-header .wrap, so that it’s part of that element which is already fixed in place. - closeevent: this is a filter which I doubt many people will ever need. I’ve added it here because Altitude Pro uses on page anchor links for the front page, to scroll the page down to a specific section. Because the page isn’t reloading, the menu panel won’t close on its own, but changing this line tells us that when any menu item is clicked, to go ahead and close the menu panel.
- button_color: this lets me remove the background color from the button, which is a nice touch with this theme.
- background: totally optional, but this way I can make the menu panel translucent, which is a nice touch since it’s sliding over the website content behind it.
Step Three: Check Your Settings
Theoretically, you’d have already done this bit, which is to just scan over the SuperSide Me settings page and make sure that the menu headings and colors are the way you’ll want them. Changing the width here won’t make a difference, because your filter will override it.
Step Four: Style It a Little
I added just a couple of styling rules to Altitude’s stylesheet to finesse the look of things a bit:
/* Altitude Pro Full Width SuperSide Me Tweaks
--------------------------------------------------------- */
.site-header .wrap {
position: relative;
}
.site-header.dark .slide-nav-link {
margin: 0;
}
.slide-nav-link {
margin: 12px 0;
}
.menu-close:hover {
border: none;
}
@media only screen and (max-width: 1023px) {
.slide-nav-link {
margin: 2px 0;
}
}Code language: CSS (css)At this point, if you click that menu button, you’ll get this (note that I have a second menu loaded as well):
So that’s it. Even though SuperSide Me is intended to make mobile menus easy, you can also use it for your entire site, at any size to have a slick, sliding side menu.
Thank you for the SuperSide Me filters you list on this page! I was looking for the solution to a problem with the SuperSide Me mobile menu not closing when clicking anchor links, and here it is.
I always appreciate how thoroughly you support this plugin, which I use on every Genesis Framework website I develop. Thank you yet again. 🙂