In this guide, we will show you how to use the “Liquid Fullscreen Menu widget” on your Elementor website. The Liquid Fullscreen Menu widget allows you to create a sleek, interactive full-screen navigation menu with fluid animations and dynamic menu items. It’s perfect for providing users with an immersive and modern navigation experience while keeping your website visually engaging. With its smooth transition effects and fully customizable styling options, the Liquid Fullscreen Menu widget enhances user interaction and ensures intuitive navigation across your site.
Let’s explore the customization options available in the “Liquid Fullscreen Menu widget” for Elementor below.
Elementor Free Liquid Full Screen Menu Tutorial Video
Add a Free Liquid Full Screen Menu to Elementor
Add a Free Liquid Full Screen Menu Widget to an Elementor Page
Elementor Liquid Full Screen Menu Widget General Settings
Select Menu
The widget is pulling menu items from the WordPress menu named "Banana".
Max Depth
All levels of the menu structure (parent items, sub-menu items, etc.) will be displayed.
Close Others on Open
When a parent menu item is opened (to show sub-menus), other open sub-menus will not automatically close.
Clickable Parent Items
Parent menu items (those that have sub-menus) are not clickable; they only act as toggles to open the sub-menu.
Show Expand Collapse Icon
Icons will be displayed next to parent items to visually indicate that they can be expanded or collapsed.
Collapsed Font Awesome
The Unicode for the Font Awesome icon is used when the menu section is collapsed.
Expanded Font Awesome
The Unicode for the Font Awesome icon is used when the menu section is expanded.
Elementor Liquid Full Screen Menu Widget Style Settings
Menu Overlay Background Color
The final background color of the full-screen menu when fully open. It is also used for the last layer in the opening animation.
Overlay 1 Color
The color of the first layer of the animated overlay.
Overlay 2 Color
The color of the second layer of the animated overlay.
Overlay 3 Color
The color of the third layer of the animated overlay.
Hamburger Size (px)
Sets the size of the hamburger icon on desktop and controls how it scales on smaller devices.
Hamburger Border Size (px)
Determines the width of the border surrounding the hamburger icon.
Hamburger Lines Color
Changes the color of the three lines that make up the hamburger icon.
Circle Color
Sets the color of the animated circle that appears around the hamburger icon (on hover or click).
Alignment
Controls the horizontal alignment of the hamburger icon within its column or row.
Hamburger Radius
Adjusts the corner radius of the hamburger button area, creating a circular or rounded shape.
Menu Text Typography
Controls the font, size, and weight of the menu text.
Menu Text Default Color
Sets the standard color of the menu text.
Menu Text Hover Color
Changes the color of the menu text when a link is hovered over.
Menu Text Active Color
Sets the color of the menu text for the link corresponding to the current page.
Items Alignment
Aligns all menu links within the full-screen menu area (e.g., left, center, or right).
Liquid Full Screen Menu Widget Design Examples For Elementor
Here are some live use cases for the Liquid Full Screen Menu widget.
Woo Products Liquid for e-commerce products.
Movies Liquid Fullscreen.
Thank you for using the Liquid Fullscreen Menu widget for Elementor! This sleek and interactive tool allows you to create a modern, full-screen navigation menu that captivates your visitors. Highlight dynamic menu items with smooth animations and customizable styling to provide an immersive and intuitive browsing experience. Designed for flexibility and responsiveness, it offers full customization options to perfectly match your website’s design and enhance user engagement. For support or inspiration, feel free to get in touch or explore our demo.
