How to add Off-Canvas Fly Menu in your WordPress Website or Blog (Step by Step guide)

How to add off canvas fly menu in WordPress

Adding an off canvas fly menu for WordPress website or blog gives our website a not only an option for another menu but also options for adding quick one page navigation menu / icons or content sidebars or side tabs or off canvas content blocks in the website.

If you’re thinking of giving a new beautiful look to your WordPress menu or planning to replace the existing native WordPress menu with something feature-rich or just planning to add a side menu along with your existing WordPress menu – adding an off canvas fly menu is a great idea.

5 Reason why you would want to add off canvas fly menu in your WordPress website or blog?

  1. To make your WordPress menu look different, beautiful and elegant (menu with icons, fonts and colors of your choice, many layout to choose from etc)
  2. To replace your existing boring WordPress native menu with something “trendy” and good!
  3. To give your menu more power (feature-rich menu with description lines, menu with custom background color, image or video background and more!)
  4. To add a supportive menu in your website along with the existing WordPress menu.
  5. To add one page navigation bar, content sidebar, social icons, opt-in forms or any promotional contents.

Now, if you want to achieve the above goals in your WordPress website there are many free and premium WordPress plugins which allow you to add an off canvas fly menu in your WordPress website. You’ve to be careful while choosing the right plugin looking at the features they offer in-terms of the menu design layout, templates, configuration and customization options, positioning options and other options that you’re looking for.

Here are some free off canvas fly WordPress menu plugins in official WordPress repository – which you can consider! 

And here are some premium off canvas fly WordPress menu plugins in CodeCanyon.

In this plugin we’ve considered using 8Degree Fly Menu – Responsive Off-Canvas Menu Plugin for WordPress, which is a premium WordPress fly menu plugin and available in CodeCanyon. The plugin has a lot of great features in-terms of how to set-up and configure fly menu and a range of beautifully designed menu layout templates. The menu comes to you at an affordable price of just $17!

So now, lets go ahead and add an off canvas (multi level) fly menu in your WordPress website – step by step!

Step 1: Get the plugin and install it.

As mentioned since we are considering 8Degree Fly Menu plugin in this tutorial, get the menu in CodeCanyon here : 8Degree Fly Menu – Responsive Off-Canvas WordPress Menu Plugin and install it like you install any other WordPress plugin. If you’d like to check the demo before you get the plugin check the demo of fly menu here.

And if you come across any issues while installing and setting up the plugin – consult its documentation page.

8Degree off canvas fly menu
8Degree off canvas fly menu

Step 2: Start building your fly menu!

Once you install the plugin, you’ll see 8Degree Fly Menu on the left menu bar in your WordPress dashboard. Now click on Add New and start configuring the menu. You’ve to enter the menu name and start building the fly menu. You can choose from different options eg: show / hide and configure header section of the fly menu, configure / assign the WordPress menu as fly menu, and show/hide and configure the footer section of the fly menu.

8Degree off canvas fly menu - build menu
8Degree off canvas fly menu – build menu

Step 3: Choose fly menu templates, layout and animations

Now when you’re done with Build Fly Menu section, go to layout settings and setup the layout (Full Side Menu , Nav Icon Menu, Full Screen Menu, Skewed Menu etc), select one of the available templates, then assign menu position (on which screen position the menu should be displayed) and animation options for menu, submenu and menu items.

8Degree off canvas fly menu - layout setting
8Degree off canvas fly menu – layout setting

Step 4: Fonts, colors and menu design

Now, go to fonts and color section and define the fonts, colors, background color, menu tooltips etc for your menu, submenu and menu items.

8Degree off canvas fly menu - fonts setting
8Degree off canvas fly menu – fonts setting

Step 5: Toggle buttons and display settings

Now, go to toggle button setting and configure the setting as you need and then go to display settings and configure your fly menu’s display settings eg: show menu to the logged in users or everyone, show menu in all pages or on specific pages / posts  or categories or exclude the fly menu in a specific category etc.

8Degree off canvas fly menu - toggle button setting
8Degree off canvas fly menu – toggle button setting

 

8Degree off canvas fly menu - display setting
8Degree off canvas fly menu – display settin

Step 6:  You’re done!

Once you save everything, you’re done! Your menu will appear on your website and if you need to update / edit the menu go to 8Degree Fly Menus and edit as needed! This way you can add the off canvas fly menu in your WordPress website or blog!

 

Wrapping up

I hope this step by step tutorial on how to add off canvas fly menu in your WordPress website or blog is helpful to you. If you’re looking for something similar in your WordPress website or blog – just go ahead and give it a try. Like mentioned above, the off canvas fly menu can be used as a primary menu or a secondary stylish menu or just as a page navigator too! And yes – you can explore more than this by yourself with the plugin on your hands!

If you have any questions / comments – drop them in the comment box below and we’ll reply them!

Also, you might want to checkout :

Responsive Circular Menu Plugin for WordPress

Responsive Mega Menu Plugin for WordPress

500+ must have plugins for your WordPress websites (Free)

500+ must have plugins for your WordPress websites (Premium)