Creating a fullscreen menu in Elementor can enhance the visual appeal and user experience of your website by offering a sleek, immersive navigation solution. Unlike traditional menus, a fullscreen menu covers the entire screen when activated, providing a clean and engaging way for visitors to navigate your site. In this guide, we’ll explore the steps to achieve this effect using Unlimited Element’s Fullscreen Menu widget. By the end, you’ll have a dynamic fullscreen menu that seamlessly integrates with your website’s design, making navigation both functional and aesthetically pleasing.
So, let’s embark on the journey of crafting an engaging Fullscren Menu that not only adds interactivity but also captivates your website’s visitors with its visual appeal.
Fullscreen Menu by Unlimited Elements boasts several distinctive features that can greatly enhance the navigation and user experience of a website. Firstly, it covers the entire screen when activated, eliminating distractions and focusing users’ attention on the menu items. This feature creates a visually immersive experience.
Additionally, Fullscreen Menus come with smooth animations or transitions, making the navigation feel fluid and modern. It can accommodate a wide range of content, including links to different pages, sub-menus, or additional information, ensuring comprehensive and organized access to site content. Customization options for styling and layout allow for seamless integration with the website’s design, ensuring consistency and aesthetics.
Overall, the Fullscreen Menu provides an elegant and user-friendly navigation solution that combines functionality with a visually captivating interface.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Install Fullscreen Menu Widget in Unlimited Elements
After you’ve got Unlimited Elements Fee version up and running, just head over to your WordPress dashboard. Click on “Unlimited Elements” and then select “Widgets”.
Find the Fullscreen Menu widget, move your cursor over it, and you’ll see an “Install” button. Just click it to set up the widget.
Step #3: Create a WordPress menu
You will need a WordPress menu to use this widget, So for that we need to create a menu in WordPress.
Open your dashboard
Go to Appearance → Menus
Click to Create a new menu
Give your menu a name than press "Create Menu"
Now on the left side, you will see a menu called pages. That’s where you can select all the pages that you created, to be added to your menu. After selecting all the pages you need, click on “Add to menu” and then on the “Save Menu” button.
That’s it. Our menu is ready. Now it’s time to create fullscreen menu.
Step #4: Adding the Fullscreen Menu on an Elementor page.
Drag and drop the Fullscreen Menu widget on the page.
Now select the menu you created earlier in select menu query settings of widget. You can also set the max depth of the menu you want to display in the fullscreen menu.
You can set the alignment of hamburger icon. You can also decide the open transition for fullscreen menu. It also give option to show or hide the social icons.
To achieve more advanced Fullscreen menu layouts on your website, you can load Elementor templates both before and after the menu. This will allow you to create intricate Fullscreen menu design for your Elementor page.
Step #5: Styling the Fullscreen Menu widget
The Fullscreen Menu widget provides a wide range of customization options so you may personalise how it looks. Your options are as follows:
Hamburger Styles: Change the hamburger background color, icon color, padding and size.
Social Icon Styling: You can change the social icon colors, sizing, margin, spacing and hover effect.
Submenu Icon Configuration: Adjust the size of the menu icon and set the margins.
Menu Title Customization: Fine-tune the typography, color, border, and background of the menu title.
Typography for Menu Items: Customize the typography for both menu items and sub-items. You can specify padding and set distinct background colors for normal and hover states.
Active Menu Icon: You also have the flexibility to change the color and background color of the active menu icon, ensuring it stands out when menu item is active.
And there you have it, your Fullscreen Menu is all set up and ready to go! This guide has shown you how to create an engaging Fullscreen Menu using Unlimited Elements, the plugin that enhances Elementor, the popular WordPress page builder. With creative control over styling options like shapes, colors, typography, animations, and positioning, make sure your menu perfectly matches your site’s unique style. Now, enjoy crafting an exceptional user experience with your very own Fullscreen Menu, powered by Unlimited Elements for Elementor.
Example of Fullscreen Menu
Here is an example of what you can achieve with Fullscreen Menu widget.
Additionally, Unlimited Elements offers these menu navigation widgets to make your website more accessible and user-friendly.
