“8 Degree Fly Menu” Documentation by “8Degree Themes” v1.0.0
“8 Degree Fly Menu”
Thank you for purchasing our plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
Table of Contents
- Installing Instructions
- Creating a Menu for Eight Degree Fly Menu
- Configure 8Degree Fly Menu
- Build Menu
- Fly Menu Layout
- Font and colors
- Toggle Button Settings
- Display Settings
- Custom CSS
A) Installing Instructions - top
- Unzip [plugin].zip
- Upload all the files to the /wp-content/plugins/eight-degree-fly-menu
- Activate the plugin through the 'Plugins' menu in WordPress.
- For customizing the plugin settings, click on 8 Degree Fly Menu option menu in WordPress left admin menu.
Once the plugin is installed and activated you will find a menu named "8 Degree Fly Menu" in the left menu bar of the admin menu. Once you click on that menu, you will go to menu listing page. You can click on Add New. But before that lets create a menu first.
You will need to need to configure a WordPress Menu before you can begin creating your fly menu. So,
- Go to Dashboard-> Appearance-> Menus.
- Click on Create a Menu, to create a new menu.
- Provide a menu name and click on Create Menu.
- Go to Screen Option on the top of the Menu Page and check 8Degree Fly Menu under Boxes.
- Locate the 8Degree Fly Menu Meta boxes, Check on Use as fly menu option if you want use the current menu as fly menu.
- Select the Menu items you can to add to be menu and click on save menu.
- You will see the 8Degree Fly Menu icon on each Menu item, click on it to open a modular setting menu
Unlike a normal menu this menu allows you to add things like, an icon, a sub-menu title, a grouping header with its own icon, a notification label and a long description where you can pass almost anything to your individual menu item.
General Settings
- Add a Header Label: Enable a Header label on top of menu to create a pseudo group title.
- Select Header Icon Type: Choose a header icon from either the default provided icons or upload a custom icon. You can also add direct icon code such as fa|fa-align-left in the input field.
- Menu Header Label: Enter the menu header label
- Select Menu Icon: Choose a menu icon from either the default provided icons or upload a custom icon. You can also add direct icon code such as fa|fa-align-left in the input field.
- Hide Navigation Label: Check to hide menu label in frontend. This can be used when you just want Icons in your menu
- Menu Short Description: A sub label to your menu label.
- Menu Notification Label: Add a notification label to your menu item.
Additional Content:
You can use the editor to add custom contents, iframes, images, shortcodes, etc. You can make best use of your HTML and CSS skills here to get everything just right.
- You will need to first save the menu after any menu item change to see the 8Degree Fly Menu option in the newly added menu items.
Once you have created your menu items, let's create your first ever Flymenu.
- Click on 8Degree fly Menu on the left admin panel.
- Click on add new.
- Enter title for your fly menu.
You can configure the fly menu in couple of steps, Let's begin with
Here you will set all the content for your fly menu here. Fly menu is divided into 3 parts: Header, Body and Footer. These sections may vary in position according to the layout you choose. You can choose to disable the Header/ Footer section.
Header section
The header section is where you can set the identity of your website, user or anything you like. You can set Site title and tagline/ username/ custom text, header image/ user image/ custom image, a search bar and custom content. Enable/ disable each section as you like.
- Enable Header Section: Activate header section in the menu.
- Add Fly Menu Top Text: Choose Top Menu Text.
- Add Fly Menu Header Image: Choose header image type.
- Add Fly Menu Bottom Text: Choose bottom header text type.
- Header Additional Content: Enter additional header content or shortcodes here.
- Add Search form in Header: Check to enable Search Box in the header section.
Body Section
The awesome thing about fly menu is that you are not limited to just using the WordPress menu in your Fly-menu. Instead you can choose to add custom content in place of the WordPress Menu. This can be used to make awesome Call to Actions as well.
- Body Content: Choose body content type.
Footer section
- Enable Footer Section: Activate footer section in the menu.
- Add Search form in Footer: Check to enable Search Box in the footer section.
- Add Social Icons in Footer: Check to enable social icons in the footer section. You can drag and drop to position the social icons accordingly. There are 20+ social icons.
- Additional Footer Content: Enter additional footer content or shortcodes here. It is the perfect place to place your Copyright/ Credit notes.
2) Fly Menu Layout - top
The fly menu comes in 4 different layouts. These include a Side Menu which has all the available features of the plugin, a Nav Icon menu which is a Icon based menu that is always shown in your site. A Skew Menu to add something new to your site and a Full Menu that cover ups your entire view screen. Please note that all the menu content may not appear in all the menu layouts due to the structure of the layouts.
-
Full Side Menu:
- Choose Template: You can choose from 2 different templates
- Menu Position: You can choose from top, bottom, left, right
- Sub Menu Type: You can choose a drop menu or a push menu
Animation Settings:
- Menu Animation: Set how the menu appears.
- Sub Menu Animation: Set animation on sub-menu
- Menu Item Animation: Set animation on menu-items
- Content Blur Effect: Set the content blur effect
-
Nav Icon Menu:
- Choose Template: You can choose from 2 different templates
- Menu Position: You can choose from left and right
- Sub Menu Type: This only supports push menu
Animation Settings:
- Menu Animation: The menu is set to be sticky.
- Sub Menu Animation: Set animation on sub-menu
- Menu Item Animation: Set animation on menu-items
Full Side Menu:
- Choose Template: You can choose from 3 different templates.
- Menu Position: You can set the menu trigger at top, bottom, left, right position.
- Sub Menu Type: You can only choose a drop menu.
Animation Settings:
- Menu Animation: Set how the menu appears.
- Sub Menu Animation: Set animation on sub-menu
- Menu Item Animation: Set animation on menu-items
Skew Menu:
- Choose Template: You can choose from 2 different templates.
- Menu Position: You can set the menu trigger at left and right position.
- Sub Menu Type: You can only choose a drop menu.
Animation Settings:
- Menu Animation: Set how the menu appears.
- Sub Menu Animation: Set animation on sub-menu
- Menu Item Animation: Set animation on menu-items
- Content Blur Effect: Set the content blur effect
3) Font and Colors - top
The fly menu is a very customizable plugin with option to change typography, color, backgrounds, borders, notification label, sub-menu navigation icon and so on. You can set customization for the parent menu/ first level menu, submenus and the additional content block. You can leave any field blank to use the default template CSS.
Select Template type: For quick setup you can choose the default template type. If the default settings do not work for you, choose custom template type and start setting the custom options. All the colors are initially set to the default template of side menu-> template 1.
Menu Font Settings: Change the menu font color, size and family from here
- Font Family: Select from all available Google fonts.
- Text Transform: Set the menu font to uppercase/ lowercase/ capitalized/ normal
- Font Weight: Set the menu font weight. All font weight may not be compatible with all fonts. Please check Google Fonts for font weight capability.
- Text Align: Align text to left/ right/ center
- Font Color: Set the menu font color
Parent Menu Settings: Set the first menu level settings here
Color and Background
- Background Type: Choose between a color background, an image background or a video background.
- Background color: Set the background color you can also set alpha value for transparency. This setting can also be used as a overlay color while using video/image background.
- Image URL: Click on the upload icon button to add a background from the Media Library or simply paste a URL source in the text field. Image background setting is not available for Skew menu.
- Video URL: Set the background video URL here. The plugin support only YouTube Videos. You can enter a video URL as https://www.youtube.com/watch?v=BKXCVPuBIpQ . Video are not supported in small screen devices, instead you can choose to set a fallback image. For that, just set the Image Background URL and select the Use Image Background as fallback image option. Video Background is only supported in the Side Menu and Full Menu.
Borders and Hover
- Menu Border Type: Set menu item borders as none/ solid/ dashed/ dotted.
- Menu Border Color: Set menu item the border color here.
- Menu Hover Color: Set the menu item hover text color here.
- Menu Hover Background: Set the menu item background color here. This setting varies with the animation settings.
Menu Notification Label Settings
Please check Creating a Menu for Eight Degree Fly Menu to set a notification label.
- Choose Template: Select from 5 different notification templates.
- Background Color: Set the notification label background color here.
- Font Color: Set the notification label text color here.
Child Menus Settings
These settings will be same for all sub menu levels
Color and Background
- Background color: Set the sub menu background color.
- Font color: Set the sub menu text color.
- Background Type: Set a color background or a Image Background.
Borders
- Menu Border Type: Set menu item borders as none/ solid/ dashed/ dotted.
- Menu Border Color: Set menu item the border color here.
Menu Notification Label Settings
- Background Color: Set a different notification label background color for the sub menus.
- Font Color: Set a different notification label font color for the sub menus.
Menu Additional Content Settings
These settings will be same for all Additional Content Block.
Color and Background
- Background color:Set the sub menu background color.
- Font color:Set the sub menu text color.
- Background Type: Set a color background or a Image Background.
Nav Icon Options
Choose Nav Icon Type:
You can choose from the given Icons or Upload your own icon.
- Choose Default Icon: Choose asy of the given Navigation Icon
- Custom Upload: Click on the Upload Button to Add a Navigation Icon from the media Library.
4) Toggle Button Settings - top
You can choose the Default option for easy ready to go toggle menu button or click on Custom to make use of the provided custom Settings.
- Enable Toggle Button Text: Turn on to add a Toggle Text. The toggle font can be controlled from the Font Setting.
- Toggle Button Text: Once you turn on to add a Toggle Text option; you can enter the Toggle text in the provided text field.
- Toggle Text Behavior: You can choose to always show the toggle text or just show it when someone hovers over the toggle button.
- Define Custom Toggle Element: If you what to make the Fly Menu show only when someone click in a certain element on your website then this plugin has the feature to do this as well. This can be useful to create a quick call to action or create a separate additional menu to your site.
- Custom Toggle Element ID: You can set the Element Id here. Whenever you click on this element it will trigger the menu on or off.
For example:
<p><span id="edfm-menu-trigger-example">Click here</span> to open your fly menu.</p>
Then edfm-menu-trigger-example is your element id.
- Toggle Button Behavior: You can make the toggle menu fixed to a certain location, make it scrollable or hide the button completely. The hide option can be utilized while using the Custom Toggle Element feature.
- Choose Button Icon : You can use the default 3 line hamburger trigger button or you can choose from the given Icon set or upload custom image as well.
- Text Transform: Change the Text transform of the toggle button text
- Text color: Change the Text color of the toggle button text
- Button Background color: Change the background of the toggle button. You can also set the alpha value for a transparent background.
- Icon open color: Set the open state Icon color
- Icon close color: Set the close state Icon color
- Icon hover color: Set the hover state Icon color
- Button width: Set the button width to create a rectangular button.
- Button border: Set the thickness of the button border. Set to 0 for no border
- Border color: Set the button border color. You can also set the alpha value for a transparent border.
- Button border radius: Set the button border radius. Can be used to create a oval or circular toggle button.
Top and Left settings can be used to manage the overlapping to the toggle buttons.
- Button Position Top: Set the button Top position in px. Leave blank to use default value.
- Button Position Left: Set the button Left position in px. Leave blank to use default value.
5) Display Settings - top
You can set where to show or hide the fly menu. These settings can be used to manage multiple menus in different pages. by default all menus are set to show in all pages. You can set where to show the menu and whom to show the menu to.
- Permission Settings: Set to show the menu to all users/ Logged in users or Logged out users.
- Hide Fly Menu in: Select the pages where you do not want to show this particular menu. The list should cover all the default WordPress Standard Pages and all the single pages of any custom post type. If you select the All Single Page option no menu will be shown in the single pages regardless of th particular page option below.
6) Custom CSS - top
Since the plugin supports a lot of Custom Content in the plugin editors. This custom CSS section can be handy to provide CSS rules or modify any of the default settings or cover any settings that we might have missed in the Custom Settings.
Turn the style you have written on or off from Enable Custom CSS Section option.
Once again, thank you so much for purchasing this plugin. As we said at the beginning, we'd be glad to help you if you have any questions relating to this plugin. No guarantees, but we'll do our best to assist. If you have a more general question relating to the plugin on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.
AND IF THIS PLUGIN HAS IMPRESSED YOU, THEN YOU WOULD ENJOY OUR OTHER PROJECTS TOO. DO CHECK THESE OUT :
WPAll Club
A complete WordPress resources club. WordPress tutorials, blogs, curated free and premium themes and plugins, WordPress deals, offers, hosting info and more.
Premium WordPress Themes
6 premium WordPress themes well suited for all sort of websites. Professional, well coded and highly configurable themes for you.
Premium WordPress Plugins
45+ premium WordPress plugins of many different types. High user ratings, great quality and best sellers in CodeCanyon marketplace.
AccessPress Themes
AccessPress Themes has 50+ beautiful and elegant, fully responsive, multipurpose themes to meet your need for free and commercial basis.
8Degree Themes
8Degree Themes offers 15+ free WordPress themes and 16+ premium WordPress themes carefully crafted with creativity.
8Degree Themes
Go To Table of Contents