The floating menu(called “Float menu” in the Selection pack) allows you to create navigation that the users will always have at their fingertips, help them get the required information quickly, and thereby improve the user experience and increase the conversions easily. You can place an unlimited number of floating menus on the page in various positions available in the settings. Flexible responsiveness settings allow you to manage the display of the block for different devices.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content tab
In the Content section, you can manage the basic settings of the floating menu such as layout display, menu items, mobile display, submenu, icons, logo, etc.
General
- Menu – select the type of menu you want to use: Custom or WP menu in the floating box. Depending on the type, the appropriate blocks with settings in the Content and Style tabs will be available.
- Menu position – select one of the available menu positions: Top Left, Top Center, Top Right, Left Center, Right Center, Bottom Left, Bottom Center, Bottom Right
- Layout – select the menu display layout: horizontal or vertical.
- Menu displaying – select the menu display type for different devices.
- Toggle – select the toggle icon for the mobile menu from the Font Awesome library or upload your own SVG icon.
- Close toggle – select the close toggle icon for the mobile menu from the Font Awesome library or upload your own SVG icon.
- Toggle menu animation – select one of the available animations for the toggle menu: Grow, Shrink, Slide up, Slide down, Fade, One by one displaying. Choose None to disable the animation. The option allows specifying the easing(Ease, Ease-in, Ease-in-out, Linear), duration, and delay.
Custom navigation
The settings section is available for the Custom menu type.
- Display menu title on hover – the toggle to enable/disable the display menu title on hover.
- Display menu title – select the display type of the menu title: Inline, In another block.
Inline
The icon and item title are in the same block and styles are applied as for one element.
In another block
The icon and title of the element are separate blocks that allow you to customize the display styles for each element and apply additional options:
- Hover title animation – select one of the available animations : Grow, Shrink, Slide up, Slide down, Fade, One by one displaying. Choose None to disable the animation. The option allows specifying the easing(Ease, Ease-in, Ease-in-out, Linear), duration, and delay.
- Expand title position – specify the position where the tittle will be displayed. It can be Top(over the main menu) or Bottom(under the main menu).
Custom navigation item
The block for managing the menu items. The items can be added, removed, or duplicated.
To add a new element, click “Add Item” and fill all the necessary fields:
- Title – enter the title of the menu item
- Link – paste the link for the current menu item
- Icon – select the menu item icon from the Font Awesome library or upload your own SVG icon.
WP menu
The settings section is available for the WP Menu.
- Pointer – select one of the available pointers for the menu items on hover. The available options: Underline, Overline, Double line, Framed.
- Submenu indicator – select an icon to be added for menu items that have sub-items as an identifier. The available options: Chevron, Angle, Plus, Circle, Minus, Square, Custom(upload own SVG icon or choose one from the library).
WP menu submenu
- Expand menu position – specify the position where the submenu will be displayed. It can be Top(over the main menu) or Bottom(under the main menu).
- Submenu pointer – select one of the available pointers for the menu items on hover. The available options: Underline, Overline, Double line, Framed.
- Animation – select one of the available animations : Grow, Shrink, Slide up, Slide down, Fade. Choose None to disable the animation. The option allows specifying the easing(Ease, Ease-in, Ease-in-out, Linear), duration, and delay.
Style tab
On the style tab, you can manage the element styles of the sticky/floating navigation like menu item colors in different states, size, typography, borders, padding/margin, etc.
Navigation wrapper
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
NORMAL/HOVER
The navigation wrapper style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Custom menu item
The settings section is available when the Custom menu type is selected on the Content tab.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Item spacing – the setting allows managing the spacing of the menu items in different units(px, %).
- Title block width – specify the width of the title block in different units(px, %) for desktops, tablets, or phones.
- Icon size – specify the icon size of the menu in different units(px, %) for desktops, tablets, or phones.
- Icon spacing – specify the spacing between the item title and icon in different units(px, %) for desktops, tablets or phones
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER/ACTIVE
The menu style settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Icon Color – specify the icon color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Block title styles
The settings section is available when the Custom menu type is selected on the Content tab.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Offset – X – specify the x-offset of the title in various units(px, %) for desktops, tablets, or phones.
- Offset – Y – specify the y-offset of the title in various units(px, %) for desktops, tablets, or phones.
NORMAL/HOVER
The style settings of the floating menu wrapper for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
WP Menu item/WP menu submenu item
The settings section is available when the WP menu type is selected on the Content tab.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Indicator color – select the icon color of the menu indicator.
- ndicator click area – specify the click area in different units(px, %, em) for desktops, tablets, or phones.
- Indicator spacing – the setting allows managing the spacing of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Submenu indicator size – specify the icon size of the menu indicator for desktops, tablets, or phones.
- Space between items – the setting allows managing the spacing between the menu items in different units: px, %. The option is available only for the Menu item section.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER/ACTIVE
The menu style settings for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
WP Menu Submenu
The settings section is available when the WP menu type is selected on the Content tab.
- Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Offset – X – specify the x-offset of the title in various units(px, %) for desktops, tablets, or phones.
- Offset – Y – specify the y-offset of the title in various units(px, %) for desktops, tablets, or phones.
NORMAL/HOVER
The submenu style settings for different states.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Toggle style
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Toggle size – specify the size of the mobile toggle using a slider.
Open/Close Toggle style
The display styles block of the mobile sticky menu.
 Mobile menu toggle |  Close toggle |
NORMAL/HOVER
The toggle style settings of the floating menu for different states.
- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.