This article was last updated on the December 21, 2016.
Note: This article covers only a small portion of what you can achieve with Superfly, make sure you take a look at the official documentation which is linked to in the Documentation section below to explore the full possibilities of this powerful tool.
Make sure you already have Superfly installed and activated. If you don't you can install Superfly via your wp-admin > X > Home. Scroll down to add-ons and click Install under Superfly. Once Superfly is installed you can activate the plugin from the wp-admin > plugins menu screen. Once Superfly is installed and activated, you should see the Superfly menu item like this:
Go ahead and click on Superfly, once you've clicked that, you'll see the main admin screen like this:
Now go ahead and click on the Activate tab.
On the activation screen you'll need to enter your email and click on Save Changes entering your first name, last name and subscribing to Superfly's email newsletters is entirely optional.
Your copy of Superfly is validated automatically with X. Once you've activated Superfly all the fantastic features of this great menu plugin will then be available to use.
Setting Up Your First Menu
If you haven't already created a Menu for your WordPress install go to wp-admin > Appearance > Menus and configure a new menu. Once you've done that go back to the main Superfly admin screen and click Add New under Superfly Menus section:
Once you've clicked add-new you'll see a dropdown to select from all available menus on your site, this is useful if you want multiple different menus and may want your main navigation kept separate from your superfly powered navigation.
When you've found the menu you want to add to Superfly in the dropdown click the orange plus button.
Now in your main Superfly settings you should see the menu added like this:
Congrats! Now you've successfully added a Superfly menu, but what about getting it to actually display on your site?
There are a range of display rules within Superfly to allow you to tailor your menu exactly where you want it to display, maybe you want a different menu per page, maybe you want different menus based on the post type.
The simplest way to get going is by allowing the menu to show everywhere. If you click on your added menu.
That will then open up a Popup window like this:
As you can see by default it's set to appear everywhere. If you uncheck that, you'll then see additional options like this:
You can check or uncheck any of these as you want, remember a checked option means the menu will show on that page or page/post type. Unchecked means it won't show on that page or page/post type.
For the purpose of this article, we're going to leave that as display everywhere. You may have noticed a note in the Popup mentioning that general display rules may override the individual menu display rules. On the main Superfly settings page if you scroll down slightly, you'll see the general display rules like this:
Here there are the following options:
- Show Superfly Menu for: - Options include Everyone, Logged in users and Logged out users.
- Show on Desktops: - Options include, show and don't show.
- Show on Mobile: - Options include, show and don't show.
- Hide on Checked Pages: - This option allows you to hide all Superfly menus on specific pages. This will override the show/display rules on each individual menu. For example if you set here for Superfly not to show on the Front Page, but have an individual menu set to show on the Front Page, it still won't show, as the general display rule will override the per menu display rule.
Adding a Skewed Panel Menu
We're going to add a Skewed Panel menu to our website. As we've already added our menu in the first steps of the article above, we're now going to make that a Skewed Panel and get the button to display to open the menu.
First of all go to the Menu Panel section in Superfly and select Skewed Panel:
Once you've selected the Skewed Panel menu option, you'll see the following related options:
The most important options here to pay attention to are the Behaviour options which are:
- Slide In
- Push Content
- Always Visible
If we now save our options with the Always Visible option selected and go to the front-end of our site, we'll see our new Skewed Panel menu like this:
But what if we go back to the settings and set the menu to push content or slide-in? Go ahead and set the menu to Push Content save and then visit the front-end of your site. You'll see our menu no longer displays:
That's because when we set any option within Superfly that is slide-in or push-content we also need to setup the button to display which will then allow the menu to be shown on click or on hover.
At the top of the Superfly settings where it has the navigation items, you should see one called Button click that and you'll see the button settings like this:
As you can see by default the button visibility is disabled. Turn on the button by clicking on the toggle switch. Once turned on you'll see additional button options like this:
When using Superfly with X, the defaults will be fine for the display. If you're using a child theme with X or have custom CSS, you may need to modify the margin options within the button settings to get the button displaying correctly. Once your happy with everything go ahead and click Save Changes.
Now if you visit the front-end of your website, you should see the button displaying like this:
By clicking that button you'll then see your menu display like this:
Congrats! Your Superfly menu is now added and displaying on your site. But how about expanding the use of it? Superfly allows you to add additional text to each menu item and much more.
Modifying Your Superfly menu
Once you've added the Superfly menu you want, you'll then be able to configure individual menu items
Go to wp-admin > Appearance > Menus and you'll notice a new SF next to each menu item like this:
Click on each SF item within your menu and a popup is displayed where you can set a variety of settings per menu item these include:
- Attached Image (Shows on the left side of the menu item)
- Custom Icon Color (for if your menu item has a custom icon)
- Second Line (Text will display under your menu item)
- Section Heading (Shows above the menu item)
- Custom HTML or Shortcode (shown in a panel when the user hovers/clicks)
- Custom Panel Color (background color for custom panel content)/
- Toggle switch for hiding items and custom content on mobile, default is no
Once you have that set as you want for that menu item click Save & Close and do the same for each menu item within your menu.
Congrats! You now have Superfly setup and ready to use. While there are a variety of other options that are possible with Superfly now you have learned the basics you continue to explore the possibilities of this great tool.
As we mentioned further up, we’re only going to cover how to use Superfly and not every option it provides, to learn more about Superfly check out the official documentation here.
In addition to the above documentation Superfly also has great details on customizing Superfly which can be found here.
Users will frequently inquire about the version of Superfly being utilized within X. Because of the way that we are utilizing the plugin with in X, it should be noted that the version of Superfly included with the theme is made intentionally for numerous reasons. The following is just a few of the reasons why we do not always utilize the latest version of the Superfly plugin:
Stability – Newer versions of software do not always equal greater stability. Oftentimes there are undiscovered bugs that are introduced with certain versions and are unknown until the product has been released to the public for some time. The version of the plugin that we bundle with the theme is more or less guaranteed to work without any issues as we take a great deal of time to test all functionality thoroughly before releasing it along with the theme.
Release Cycles – While we try to include the latest version of Superfly with each release, occasionally the release cycle of the plugin will prevent this from being possible. Essentially, since we have no idea when Superfly will be releasing new versions of the plugin, we cannot plan our releases around this. Because of this, if we have already begun the process of finalizing our release and submitting it to ThemeForest for review while Superfly is putting out a new version of the plugin, that version of the plugin will not be able to make it into the theme until the next release at the earliest.
Not Always Necessary – Some of Superfly's releases have only included simple "bug fixes" without any huge additions or modifications to the rest of the plugin. Because of situations like this, it is up to our discretion whether or not a new release will make it into the theme or not based on the nature of the update.
Because of these reasons (among others), there is no need to register your license for Superfly if you happen to have one. In fact, doing so is discouraged in order to prevent any potential conflicts when updating, as previously mentioned. If you happen see a notification in your WordPress admin panel asking you to register Superfly upon activation, simply dismiss this notice.
Hopefully the information provided above has helped you to gain a better understanding of what to expect from utilizing Superfly within X. Ultimately, there are a few things to take away from this article:
- Superfly is a extremely powerful and flexible plugin that will assist you with creating the perfect website.
- The version of Superfly included with the theme is an unmodified version of the plugin.
- We do our best to ensure that the version of Superfly included with X is as up-to-date as possible; however, this might not always be the case based on the reasons listed in the "Bundled Version" section above, which includes stability, release cycles, and the fact that not all updates are necessary.
- Any questions concerning the usage of a Superfly feature should be directed to the online documentation referenced in the "Documentation" section above.