How to Add a Floating Menu in your WordPress Website?
Do you want to Add a Floating Menu in your WordPress Website?
Floating Menu which is also known as Stick menu is used in WordPress website to face the appearance of menu bars even when you scroll down the page. It creates and places a unique extension. The menu moves along with the scrolling of the page and remains visible. The panel doesn’t take much of space and remains visible every time.
Floating menus are used to improve user experience and decrease the bounce rate which eventually increases the conversion in the site. To create a floating menu, you will require a floating menu plugin.
In this tutorial, we will learn to Add a Floating Menu in your WordPress Website.
In order to do so, we introduce you to a perfect WordPress Premium Floating Menu – WP Floating Menu Pro
WP Floating Menu Pro
It is a smart premium WordPress Plugin that allows you to enhance the WordPress website’s usability with easy one-page navigator and many other sticky navigation menus. You can use this plugin to add one-page navigation menu in any WordPress Themes/Websites. Easily define the sections on your site and create a navigation menu in just a few minutes.
Major Features of WP Floating Menu Pro:
- 7 new template designs(Now total 20 templates(including 13 older templates)
- Modal popup to display the popup content linked into the menu. Supports texts and shortcode
- Now support font awesome 5.
- New icon set included (Elegant Iconsets)
- Different menu for responsive screens. Now you can set different menu for responsive screens and desktop screen separately.
- Show/Hide menu on custom scroll
- The specific menu when in various default WordPress section
- Show/Hide the menu for responsive screens with single click
- Preview option for “Check before you implement”
- Updgraded with various minor features for better UX.
- XHTML friends network support
- Refinements in previous templates for better UI.
Let’s Add a Floating Menu in your WordPress Website!
Step 1: Installation of WP Floating Menu Pro
In order to install the plugin in your site, follow our tutorial guide on ‘How to Install New WordPress Plugin?’
Activate the plugin after you install it on your site.
Step 2: All Menu
After the plugin is activated in your website, you can view the WP Floating Menu Pro on WordPress Admin sidebar menu. Click on the option and you will land to the All Menu page.
In this section, you can view the listings of all the menu created. You can see the Add New Menus button at the top left of the menu listing table. You can also edit or delete the menu created from here.
Here are the things you can do with the created menu list in the all menu section!
- 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 the 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 the home page.
Step 3: Add New Menu
In this section, you can create or add a new menu.
- Enter the Menu Name
- Click on Add Menu Button
When you hit the Add Menu Button, you will be directed to another page which is the edit section of the menu. There will be two different tabs:
Menu Structure is the first tab of the section. In this section, you can:
- Add menu fields for new menu by clicking on the selected pages, posts and categories on the left side of the page.
- Check on the required filed and click on ‘Add to Menu’.
When you click the down arrow of the newly added menu field, you can see various configurable component of the menu.
- 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 on the menu.
- Title Attribute: This is the title attribute for the 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 the tooltip title to display in this field.
- Target Link: You can change the 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 the link in the same tab
- Custom Class: Field to add a custom class to add/edit or link to customization 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 the popup and linked with the menu. Currently, support simple text and shortcode such as “Contact Form 7”
- Menu Icon Type: You can set the menu icon to display. Here you can choose four sets of icons. You can choose either dash icons, font-awesome icons, generics and elegant icons. Added Since Version 2.0, currently supports Fontawesome 5.0 too.
- Menu Icon: You can set the menu icon to display. Here you can choose three sets of icons. You can choose either dash icons, font-awesome icons or generics.
- Use Custom Icon: You can set the menu icon if no icon found in the image select gallery among dash icons, font-awesome icons or generics. You can simply insert icon as fa fa-bars for font awesome 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 colour or if you have a custom image icon, you can upload the image as an icon from here.
- Icon Color: You can set icon colour from this section.
- User Control: You can control if the specific menu can be shown/hidden and any specific 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 the “remove” link.
Display Setting is the second tab of the section. In this tab, you can select the template layout for the menu. Once you have successfully created a menu, select the template perfect for your website.
You can choose from two different options:
- Use Inbuilt Template: When you select this option, on changing option, you can see and preview the template from the 20 pre-designed templates the plugin offers.
- Use Custom Template: This section will list the custom template you created from “Build Custom Template” section of the plugin. Custom template Feature is listed later on this page.
- You can select the position of the menu from this setting tab too. The available menu position is:
- Top Right
- Middle Right
- Bottom Right
- Top Left
- Middle Left
- Bottom Left
Save the menu once you finish configuring menu structure and display setting.
Step 4: Custom Template
When you land on template listing page after clicking Build Custom Template, 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 options page where you can change various options to build your own custom menu. Following Section can be seen for building a 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 the custom design.
- Hover Transform Width: You can select the icon to transform width on hover applicable only for template 7 layout.
- Icon Background Color: You can select the icon background colour for the menu icon from here.
- Icon Size: You can select icon size for the menu icon from here.
- Icon Margin: You can select icon spaces between individual icon from here.
- Title Font Color: You can select the title font colour from here.
- Title Typography: You can select the title font family from here.
- Title Text Transform Style: You can select title text transform style for a font from here. You can select uppercase, lowercase, capitalize or none(same as text input) form here.
- Title Font Size: You can select the title font size from here.
- Tooltip Font Color: You can select tooltip text font colour from here.
- Tooltip Typography: You can select the tooltip font family from here.
- Tooltip Font Size: You can select the tooltip font size from here.
- Menu Background Color: You can select a menu background colour from here. The option is applicable only to template 5,6,8 and 9.
- Icon For Expand Trigger: You can select your own custom to expand trigger icon implementable to only template 5 and 6. Else, the 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, the default icon will be implemented.
Step 5: Floating Menu Settings
From this panel, you can configure all the basic settings of the floating menu like enable/disable the menu, enable/disable menu for the desktop screen, and many more. Here, you need to maintain the settings of the menus as you want it to appear in your site.
Save the settings after you configure all the options.
Here, you are done installing, activating, configuring and adding a Floating Menu in your WordPress website.
The free version of the plugin is also available. If you want to try the free and move to premium, get WP Floating Menu.