When I first saw Elementor’s standard mobile menu, I wasn’t impressed.
It lacked the appeal and functionality I wanted, so I decided to create a small hack to make it more attractive and useful—all with pure CSS, and in just a few simple steps.
1. add the "WordPress Menu" widget
Typically, this widget is placed in the header. If you don’t have Elementor Pro, you can use a plugin to create custom headers and footers.
Select the “WordPress Menu” widget from the Elementor panel:
Go to the “Advanced” tab and add a class name (or an ID if you prefer—either works similarly in this context).
I named my class acmenu, but feel free to choose your own name and update the code below accordingly.
After setting the class name, finish configuring the widget by selecting the menu to display and adjusting any other relevant settings.
2. add the CSS code
The following CSS can be customized and placed in various locations:
- An Elementor “HTML” widget (quick but not ideal)
- Appearance > Customize > Additional CSS (a better option)
- A custom
style.cssfile in your child theme (recommended)
Here’s the CSS code:
.acmenu .elementor-menu-toggle {
z-index: 999999;
}
.acmenu .elementor-nav-menu--dropdown {
position: fixed !important;
top: 0!important;
left: 0!important;
display: block !important;
margin: 0px !important;
width: 100vw;
height: 100vh;
text-align: center;
}
.acmenu .elementor-nav-menu--dropdown ul {
display: block;
width: fit-content;
min-width: 400px;
margin: 10% auto 0 auto;
}
Colors and other parameters can be managed through the widget’s options. I’ve kept the code minimal, adding only what’s necessary.
3. add more CSS code
If you want to further personalize the menu by adding your logo or some text, you can use this additional CSS hack:
.acmenu .elementor-nav-menu--dropdown ul:before {
content: "";
display: block;
width: 100%;
height: 90px;
background-image: url('/wp-content/uploads/2024/08/aclogo_web_trasp.png');
background-position: 15px top;
background-repeat: no-repeat;
background-size: contain;
margin-bottom: 30px;
}
In this example, I’ve added a logo, but you can also include text in the content attribute—such as your website or company name—and style it as desired.
FINAL RESULT
While it’s nothing too flashy, this simple hack can enhance the functionality and aesthetics of your mobile menu, making it more engaging for your visitors.