One page navigator, Sticky menu for WordPress: WP Floating Menu Pro – Documentation
- Unzip wp-floating-menu-pro.zip
- Upload all the files to the /wp-content/plugins/wp-floating-menu-pro
- Activate the plugin through the ‘Plugins’ menu in WordPress.
- For customizing the plugin’s settings, click on WP Floating Menu PRO menu in WordPress of left admin menu.
This is the landing page for plugin. Here you can see the listing of the all the menu created. Here you can see Add New Menu buttons at top left of menu listing table. You can also edit or delete menu created from here.
Here is the things you can do with the created menu list.
- Edit: You can edit the current template via the “Edit” link.
- Duplicate: You can duplicate the current template via the “Duplicate” link. All the attributes from the earlier menu will be copied and new menu will be created based on the copied menu.
- Delete: You can delete the current template via the “Delete” link.
- Preview: You can preview the current template via the “Preview” link. All the setting saved will be integrated and will be shown on home page.
Add New Menu
In this section, you can create new menu. You need to add menu name and hit enter or click “Add Menu” button. After you hit “Add Menu“. You land of edit section for menu where you can see two different tabs as listed below:
- Menu Structure
First tab section is called “Menu Structure“. Here, You can add menu fields for new menu by clicking on selected pages,posts,categories on left side of page. After the new menu is created then you can see page, post and category listing on right side of page. You can check your required field to menu sort field by clicking “Add To Menu“.
Then when you click the down arrow of newly added menu field, you can see various configurable components of menu as listed below:
These are the settings that you can configure for each menu field.
- Navigation Label :This is the menu title that displays for the menu icon.
- Show Navigation Label :Checkbox option to show or hide the navigation label in menu.
- Title Attribute :This is the title attribute for the a tag for SEO friendly navigation menu.
- Show Tooltip Title :Check/Uncheck to show/hide tooltip text for the menu.
- Tooltip Title Field :You can enter tooltip title to display in this field.
- Target Link :You can change target link to load target link within the same page or new tab.
- Open Link in New Tab :Option to open the new link in either new tab or open in link in same tab
- Custom Class :Field to add custom class to add/edit or link to customiztaion or jquery part.
- Link Relationship(XFN) :Option to makes it easier to represent the relationships you share with the owners or authors of other websites using XFN™
- Modal Popup For This Menu : Added Since Version 2.0, Option to link the menu with popup content in the frontend.
- Modal Popup Content :Added Since Version 2.0, if enabled “Modal Popup For This Menu”, textarea field to insert content that will be displayed in popup and linked with menu. Currently support simple text and shortcode such as “Contact Form 7”
- Menu Icon Type : You can set menu icon to display. Here you can choose four sets of icons. You can choose either dashicons, font-awesome icons, genericons and elegant icons. Added Since Version 2.0, currently supports Fontawesome 5.0 too.
- Menu Icon : You can set menu icon to display. Here you can choose thress sets of icons. You can choose either dashicons, font-awesome icons or genericons.
- Use Custom Icon : You can set menu icon if no icon found in the image select gallery among dashicons, font-awesome icons or genericons. You can simply insert icon as fa fa-bars for fontawesome and so on. Also, since version – 1.0.9 “vs vs-ninja” for Vesper Icons in custom icon field.
- Use Custom Image : You can either set menu icon color or if you have custom image icon, you can upload the image as icon from here.
- Icon Color : You can set icon color from this section.
- User Control : You can control if the specific menu can be shown/hidden and any specfic user role. You can select among the logged in user only( Also support custom user role added) or show specific menu element for “All logged in User”
- Remove:You can remove the menu field by clicking “remove” link.
- Display Setting
Second tab section is called “Display Setting“. Here, you can select template layout for the menu. After you have successfully created menu, then you can select template layout to use for the menu. There are two option you can choose.
- Use Inbuilt Template : If you select this option, on changing option, you can see template preview and you can choose one of our 20 designed templates.
- Use Custom Template : This section will list the custom template you created from “Build Custom Template” section of plugin. Custom template Feature is listed later on this page.
- You can select position of menu from this setting tab too. Available menu position are:
- Top Right
- Middle Right
- Bottom Right
- Top Left
- Middle Left
- Bottom Left
- You can select position of menu from this setting tab too. Available menu position are:
- Note : Menu position vary from template to template. In some you can select above listed template position where as in some, you can only choose few among above listed or other. For example menu position “Bottom Center” is available for template 11, template 12, template 13 and template 17 only.
- Show Menu After Scroll Event :This option is to set the menu to be displayed only after the “scroll event”. After the user scroll to certain value(Value set in “Show Menu After Scroll Event: Single Line Text Field”), you can set the menu to be displayed. For example, you can set the menu to be displayed only after the home page banner image.
Here, when you land on template listing page after clicking Build Custom Template where you can see the list of the custom template created. You can add, edit and delete the template from this section. When clicked on “Add New Template“, you will land on custom template option page where you can change various options to build your own custom menu. Following Section can be seen for building custom template design option.
- Template Name : Name for the template.
- Select Menu Layout : You can select “Builtin” custom templates lists in which you want to implement custom design into.
- Hover Transform Width : You can select icon transform width on hover applicable only for template 7 layout.
- Icon Background Color : You can select icon background color for menu icon from here.
- Icon Size : You can select icon size for menu icon from here.
- Icon Margin : You can select icon spaces between individual icon from here.
- Title Font Color : You can select title font color from here.
- Title Typography : You can select title font family from here.
- Title Text Transform Style : You can select title text transform style for font from here. You can select uppercase, lowercase, capitalize or none(same as text input) form here.
- Title Font Size : You can select title font size from here.
- Tooltip Font Color : You can select tooltip text font color from here.
- Tooltip Typography : You can select tooltip font family from here.
- Tooltip Font Size : You can select tooltip font size from here.
- Menu Background Color : You can select menu background color from here. Option is applicable only to template 5,6,8 and 9.
- Icon For Expand Trigger : You can select your own custom expand trigger icon implementable to only template 5 and 6. Else, default icon will be implemented.
- Icon For Close Trigger : You can select your own custom close trigger icon implementable to only template 5 and 6. Else, default icon will be implemented.
Floating Menu Setting
From this panel , you can configure the general setting for menu. Configurable menu are listed as below.
- Enable/Disable Menu : You need to enable menu here to display menu in front-end.
- Enable/Disable All Menu For Desktop Screens :Option to display the menu or hide the menu for all the desktop screen. Default: Shown all menu, if unchecked, the menu will be hidden for the screen size more than 1024 px.
- Enable/Disable All Menu For Tablet Screens :Option to display the menu or hide the menu for all the tablet screen. Default: Shown all menu, if unchecked, the menu will be hidden for the screen size between 768px and 1024px..
- Enable/Disable Menu For Mobile Device : You can define enable/disable menu form this section. If you disable it, the menu wont be shown in mobile devices with screen size less than 480 px.
- Enable/Disable Different Menu For Responsive Screens : If checked, you can set different menu for desktop screen & responsive screen.
- Select Menu Setting: You can select specific menu from this section to be selected.
- Desktop : Menu selectable for the desktop screen. You can choose among various 7 different menu positions for this.
- Responsive : Added Since Version 2.0, different Menu selectable for the mobile screen version. Since, menu you selected can be either big or ugly on the smaller devices, or possibly have different purpose on mobile version. This option allows you to select different menu for mobile screen version. Also, you can choose among various 7 different menu positions for this.
- Note : This option is implementable on front-end only if radio button “Enable/Disable Different Menu For Responsive Screens” is checked.
- Menu Show/Hide Setting : If you want to display menu on all pages, only on home page or specific pages,category or posts, you select on this section as your need.
- Show Menu On All Pages:You can choose your menu to displayed in all pages from here.
- Show Menu On Home Screen Only : Option to show menu only on home page
- Responsive : Option to show the menu on different sections in fron-tend with custom conditioning. You can choose among the pages, posts, categories or custom post type. You can also choose among default WordPress pages such as home page(Default), home page(Blog List), Search page, 404 page and so on.
- More Setting
- Disable Search Engine Indexing : If checked, “nofollow” will be added to menu links and won’t be indexed by search engines.
- Disable Font Awesome : If checked, fontawesome won’t be loaded in front-end to avoid conflict if already loaded by other plugin.
- Smart Scroll By Offset :If checked, scroll for active class on “one page navigator” effect will be called by “Offset” instead of “Position”. Default: Position.
Setting Up Menu(Process to Setup the Basic Menu with Minimal Setting)
Here, the basic to setup the menu in the plugin and displaying at least 1 menu in the frontend is being describd as follows.
1)You will have to enable the menu in the plugin first to make the menu display on the frontend which is the first checkbox in “Floating Menu Setting” page with setting header “Enable/Disable Menu”
2)Then, you will have select the menu for any of the specific position which will be listed inside each individual select option according to the menu position as assigned in the “Menu Add/Edit section”. For this, you should have created at least one of the menu from the “Add New Menu” section.
P.S. Few things need to be considered as you will have to check if the “Menu Position” or “Template Type” is being listed on the plugin list page or not. And If not, then you should go to the menu edit page and save the “Menu Structure” and “Display Setting” have separate save button assigned.
3) You will then have to select where you would like to display the menu. Available locations are all page, home page only, or any specific pages or posts.
4) That’s it and after you save the setting, your menu should show in the frontend.
Page Wise Configurable Menu
Here, the additional metabox field on page edit section on the right side allows you to control the different menu to be displayed or disable for that particular page too. You can either select any menu to display on that particular page instead any other default setting from “Floating Menu Setting” or disabled menu for that specific page.
How to Assign Page Specific Menu (Step wise Process)
– To assign page wise menu, please follow following steps.
1. Please go to “Floating Menu Setting” page and assign the default menu to the pages where you want to set the menu by selecting one of menu you have created and setting them to specific pages as shown on image below. Here as you can see, menu named “Floating Menu Demo” has been assigned to both pages where you wanted to display menu. So, you will need to check both the pages where you want to set the menu. This will tell the plugin to set default menu and display menu to those very specific pages.
2. After that, please go to specific page edit section and change the “WP Floating Menu Options” located at bottom right corner of screen and set the menu to different menu as shown on screenshot shown below ( Menu named “Custom Template Menu” in this case). So, this will tell the plugin to show the menu on this very specific page but not one set on “Floating Menu Setting” but the menu assigned in this very specific page.
These quick notes can also be accessible in “How to Use” page in plugin’s submenu. Here are few things you need to know to understand the plugin features or limits of the plugins.
- Setting Implementation in frontend : Setting differs according to menu template layout, so all setting maynot be implementable for all templates.
- Tooltip Disabled : Tooltip is disabled for template 10 and Template 19 layouts. Since, the basic design of these template calls for “Menu Title” as a tooltip design, we have disabled the tooltip option in front by default.
- Menu Title Disabled : Menu Title is disabled for template 20 this template calls for tooltip design, we have disabled the “Menu Title” option in front by default.
- Smart Scroll By Offset : Sometimes, due to either theme or other plugins, “position” value doesn’t seems to be recognized by our plugin for “One Page Navigator” feature to scroll and enable “active class” effect. This issue has been seen in many of clients. So, Added Since Version 1.3.2, we have added the option to change the way scroll function is being called in jquery from “position” to “offset”. Considering facts that all other requirement such as “Height” for the section to be scrolled are okay.
- Responsive Menu :
- While testing in desktop browser for “Responsive Menu”, please refresh the page and check when switching from desktop-mobile-desktop. This don’t work on normal browser resize.
- While on “Floating Menu Setting option page”, if “Enable/Disable Different Menu For Responsive Screens” is enabled, and one of the “Responsive Menu Select Option” to any specific position is disabled, then the menu for responsive screen is not loaded by default. For this, please either select the “Specific menu for responsive screen select option” or disable the checkbox for “Enable/Disable Different Menu For Responsive Screens”
Themes Compatible with the Plugin : WP Floating Menu Pro works best with every WordPress theme. It’s even more remarkable when used with popular themes like VMagazine and AccessPress Parallax.
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.
This documentation tried to cover as many details about the plugin to ease your plugin experience. To see screenshots of plugin backend and frontend templates, you can see them here
Also, you might want to,